reactjs - 如何访问样式化组件中的 postcss 变量以进行媒体查询？

Question

我正在使用一个 CDN，它有一堆定义的 pcss 变量，我想在我的样式化组件中使用它们。我能够通过var(--color-green). 但是，媒体查询变量似乎不起作用。有谁知道为什么会这样？

这是我尝试过的，在--media-query-max-smallcdn中定义为max-width: 647px

const comp = styled.div`
  @media (var(--media-query-max-small)) { }
`

标签： reactjsmedia-queriesstyled-components

Answer 1

作为 PostCSS 的创建者，我推荐使用astroturf。它是带有 styled-components API 的 CSS-in-JS 解决方案，但与 styled-component 相比，astroturf 没有运行时（SC 有 15 KB 运行时），仅在构建期间解析 CSS（SC 每次在客户端解析它) 并支持 PostCSS 和许多其他 CSS 工具。

在您的情况下，只需放入postcss-loaderCSS 和astroturf/loaderJS 文件即可。一切都会奏效。