样式化的组件和媒体查询

Question

在公司中，我们想创建一些样式化的组件util来编写精美的媒体查询，并且我们正在争论选择哪种方式：

• 内插字符串，如：

  styled.div`
    ${media.mobile`
      color: red
    `}
  `
  

• 或仅返回@media字符串片段，例如（例如@media（最小宽度：100像素）：

  styled.div`
    ${media.mobile} {
      color: red
    }
  `
  

这两种方法的缺点/警告是什么？

Answer 1

我强烈推荐第二种方法，这就是我在两家使用样式组件的公司中实施的方法。

我不推荐第一种方法的原因是它最终需要做更多的工作。带有标签的模板文字将字符串分割成一个数组，这会导致不必要的内存压力，其中插在一个简单字符串中的第二种策略是轻量级。