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

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

Answer 1

您所做的方法 - 即使它有效 - 也不是最佳实践 原因是 React 会在每次使用它时一遍又一遍地渲染样式化组件的相同子组件。 最重要的是，当您必须将其用于多个设备而不仅仅是两个设备时，想象计数的行数。这将是一团糟。

相反，这是使用媒体查询的更好方法 首先，我们定义每个设备的屏幕尺寸：

const size = {
mobile: "320px",
tablet: "768px",
laptop: "1024px",
desktop: "2560px",
}

然后，我们使用从样式化组件导入的 CSS 来解决每个设备相关常量中的媒体查询

export const mobile = (inner) => css`
@media (max-width: ${size.mobile}) {
${inner};
}
`;
export const tablet= (inner) => css`
@media (max-width: ${size.tablet}) {
${inner};
}
`;
export const desktop= (inner) => css`
@media (max-width: ${size.desktop}) {
${inner};
}
`;
export const laptop= (inner) => css`
@media (max-width: ${size.laptop}) {
${inner};
}
`;

现在假设您正在创建一个样式化的div，并且想要使用媒体查询

const StyledDiv= styled.div`
/* ...css */
${mobile(css`
width:300px;
/* ...css */
`)};
${tablet(css`
width:500px;
/* ...css */
`)};
/*... and so on */
`;

在里面return就是这样使用它：<StyledDiv>....</StyledDiv>