Css 变量插值样式组件答案

【问题标题】：Css variable interpolation Styled ComponentsCss 变量插值样式组件
【发布时间】：2020-11-04 22:25:35
【问题描述】：

我有一个组件，例如：

const pretty = styled.div`
  --nth-child: 5n;
  --size: 20px; //css variable
  
  width: var(--size);

  &:nth-child(var(--nth-child)) {
    //...styles...
  }

  @media (max-width: 768px) {
    //overriding
    --size: 12px;
    --nth-child: 3n;
  }
`

问题是如何在这个地方插入css变量？

&:nth-child(var(--nth-child)) {
  //...styles...
}

如果我理解正确，这是不可能的，所以很高兴找到另一个解决方案

注意：我不能使用 JS 变量

更新：

编辑器还突出显示了那里的错误：

所以我尝试了这个，但这也不起作用：

&:nth-child(${css`var(--nth-child)`}) {
  margin-right: 0;
}

【问题讨论】：

将自定义属性更改为 5n 而不是 5?
@evolutionxbox，我试过了，还不行
可悲的是不可能的。 smashingmagazine.com/2018/05/…
@evolutionxbox，正如我所想。很遗憾，styled-components 对此没有任何破解
我不知道他们怎么可能......这不是 JS 的事情。 CSS“变量”是在运行时计算的，而不是像 SASS 或 LESS 这样的简单字符串替换。

标签： javascript css reactjs styled-components css-variables

【解决方案1】：

因此，除了属性声明之外，您不能使用 CSS 变量。它们在选择器中不起作用。

但我认为您应该能够通过其他方式在这里实现相同的目标。我知道您提到了I can't use JS variables in my case，并且您的用例可能没有示例那么简单，但是您不能只使用styled-components 附带的React props 插值

&:nth-child(${p => p.nthChildLargeScreen}) {
  //...styles...
}

@media (max-width: 768px) {
  &:nth-child(${p => p.nthChildLargeScreen}) {
    //...reverse styles from above...
  }

  &:nth-child(${p => p.nthChildSmallScreen}) {
    //...styles...
  }
}

或者甚至只是全局变量？

&:nth-child(${NTH_CHILD_LARGE_SCREEN}) {
  //...styles...
}

...etc

如果您首先可以编写样式化组件并定义 CSS 变量，那么您似乎至少应该能够执行上述操作。

【讨论】：

第一段代码不起作用，因为媒体查询中的nth-child(3) 不会覆盖当前的（nth-child(5)）
还找到了另一个解决方案（它不适用于该问题），但它是如此令人毛骨悚然，我认为社区不应该看到这一点。结束一个问题..
没错！好地方，我想这说明了为什么硬编码一开始就不那么优雅。想一想'我将删除整个部分，我想您想要使用 CSS 变量的全部原因是为了避免这种情况