reactjs - 使用样式化组件对媒体查询做出反应

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>
        )
      }
    }

标签： reactjsmedia-queriesstyled-components