Css 可变插值样式组件

Question

我有一个组件，例如：

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;
}

Answer 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 个变量，首先，您似乎至少应该能够执行上述其中一项操作。

Css 可变插值样式组件

Css variable interpolation Styled Components

javascript

css

reactjs

css-variables

styled-components