在 Styled System 中,他们有 Responsive Props 。例如:
<Box width={['100%', '50%', '25%']} />
这将产生以下 CSS:
.Box-hash {
width: 100%;
}
@media screen and (min-width: 40em) {
.Box-hash {
width: 50%;
}
}
@media screen and (min-width: 52em) {
.Box-hash {
width: 25%;
}
}
作为一种替代方案,可以使用以下语法:
<Box width={{ _: '100%', md: '50%', lg: '25%' }} />
它会产生相同的结果。
我想知道是否可以使用样式组件做类似的事情。我的想法是这样的:
const StyledBox = styled.div`
width: ${['100%', '50%', '25%']};
`
const OtherStyledBox = styled.div`
width: ${{ _: '100%', md: '50%', lg: '25%' }};
`
这可以通过样式化组件实现吗?如果没有,知道如何创建一个可以做到这一点的函数或“mixin”吗?
谢谢。
最佳答案
如果您的应用的样式“API”有 3 个媒体查询断点,那么您可以在样式组件中使用 props 并返回正确的 CSS。指定您想要的 API,即 <StyledBox width={{ _: '100%', md: '50%', lg: '25%' }} />
.
import styled, { css } from 'styled-components';
const StyledBox = styled.div`
${props => props.width && css`
width: ${width._};
@media screen and (min-width: 40em) {
width: ${width.md};
}
@media screen and (min-width: 52em) {
width: ${width.lg};
}
`}
`;
StyledBox.propTypes = {
width: PropTypes.shape({
_: PropTypes.string.isRequired,
md: PropTypes.string.isRequired,
lg: PropTypes.string.isRequired,
}),
};
StyledBox.defaultProps = {
width: {
_: '100%',
md: '50%',
lg: '25%'
}
};
样式组件 css helper功能
用法:
<StyledBox>
This gets default media breakpoints, 100%, 50%, 25%
</StyledBox>
<StyledBox
width={{ _: '90%', md: '80%', lg: '70%'}}
>
This gets overridden media breakpoints, 90%, 80%, 70%
</StyledBox>
更新
如果您不希望每次都写出媒体查询,请将其纳入样式实用程序函数中,以便在您想要响应的任何其他样式组件中使用。
const mediaQueries = ({ sm = '100%', md = '50%', lg = '25%'}) => css`
width: ${sm};
@media screen and (min-width: 40em) {
width: ${md};
}
@media screen and (min-width: 52em) {
width: ${lg};
}
`;
然后在任何样式组件中导入并使用
const ResponsiveDiv = styled.div`
...
${mediaQueries()}
...
`;
const CustomResponsiveDiv = styled.div`
...
${mediaQueries({ _: '90%', md: '80%', lg: '70%'})}
...
`;
关于javascript - 样式组件中的响应式数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59814225/