media-queries - 媒体查询和样式化组件

Question

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

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

有人有处理这个问题的好方法吗？

标签： media-queriesstyled-components

Answer 1

经过讨论，提出了以下解决方案：

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

现在您将所有媒体查询放在一个地方，您只需通过以下方式将它们添加到样式组件中：

${addMedia("componenName")}