如何解决媒体查询和样式化的组件
我喜欢将所有媒体查询都放在一个位置,通常在App.css文件中,因为当我想根据大小进行更改时,我会立即看到所有涉及的组件。
我正在寻找一种使用样式化组件的好方法。通常将样式附加到定义样式组件的文件上。我不想使用包装器通过className引用它们。
有人能很好地解决这个问题吗?
解决方法
讨论之后,提出了以下解决方案:
const reducer = (accumulated,[condition,css]) =>
accumulated +
`
@media(${condition}) {
${css[componentName]}
}
`
const addMedia = componentName => Object.entries(theme.media).reduce(reducer,"")
现在,所有媒体查询都集中在一个位置,您只需通过以下方式将它们添加到样式化组件中即可:
${addMedia("componenName")}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。