用样式化的组件来响应媒体查询

Question

我正在使用反应式媒体查询以及样式化的组件。基于媒体查询，我必须设置两种不同的样式。 “ div”不使用“ iDiv”或“ rDiv”呈现。定义应为“ Div”，然后才可以在“ div”之上使用。在那种情况下，我无法为同一个div定义两种不同的样式。请建议我，我该如何处理？

    import React, { Component } from 'react'
    import Login from '../components/user/login'
    import styled from 'styled-components'
    import MediaQuery from 'react-responsive';

    const iDiv = styled.div`
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30%;
      right: 0;
      margin: auto;
    `
    const rDiv = styled.div`
        width: 100%;
        position: absolute;
        padding: 7%;
        top: 40%;
    `

    export default class LoginContainer extends Component {
      render() {
        return (
          <React.Fragment>
            <MediaQuery query="(min-device-width: 1224px)">
              <iDiv> /* not working, expected would be "Div" */
                <Login />
              </iDiv>
            </MediaQuery>
            <MediaQuery query="(max-device-width: 1224px)">
              <rDiv>
                <Login />
              </rDiv>
            </MediaQuery> 
          </React.Fragment>
        )
      }
    }