媒体查询和样式化的组件

问题描述

我喜欢将所有媒体查询都放在一个位置，通常在App.css文件中，因为当我想根据大小进行更改时，我会立即看到所有涉及的组件。

我正在寻找一种使用样式化组件的好方法。通常将样式附加到定义样式组件的文件上。我不想使用包装器通过className引用它们。

有人能很好地解决这个问题吗？

解决方法

讨论之后，提出了以下解决方案：

const reducer = (accumulated,[condition,css]) =>
accumulated +
`
@media(${condition}) {
    ${css[componentName]}
}
`
const addMedia = componentName => Object.entries(theme.media).reduce(reducer,"")

现在，所有媒体查询都集中在一个位置，您只需通过以下方式将它们添加到样式化组件中即可：

${addMedia("componenName")}