如何用香草精为子元素设置样式？

Question

我开始使用香草提取物来设置 NextJS 应用程序的样式。有没有办法在不创建另一个类的情况下从父元素中设置子元素的样式？

我在 react 组件中有这样的结构：

 <ul className={styles.ul}>
   <li>a</li>
   <li>b</li>
   <li>c</li>
 </ul>

在样式文件中是这样的：

import { style } from "@vanilla-extract/css"

export const ul = style({
    display: vars.display.flex,
    listStyleType: vars.none,
})

Answer 1

您可以使用& 表示法，并在您的样式中使用nth-child 等css 选择器，如下所示：

编辑：这个 sn-p 代码根本不起作用:(

  export const ul = style({
    display: vars.display.flex,
    listStyleType: vars.none,
    selectors:{
      '& li:nth-child(n)': {
          display: vars.display.flex,
      }
    }
  })

事实上，& 代表了你在 css 中可能知道的风格。 .class-name:nth-child。 & 在本例中表示 class-name。

编辑： 正如香草提取物文档所述： 为了提高可维护性，每个样式块只能针对单个元素。为了强制执行这一点，所有选择器都必须以“&”字符为目标，该字符是对当前元素的引用。

例如，'&:hover:not(:active)' 和 [${parentClass} &] 被认为是有效的，而 '& a[href]' 和 [& ${childClass}] 则无效。

如果您想定位另一个作用域类，则应改为在该类的样式块中定义它。

例如，[& ${childClass}] 是无效的，因为它的目标不是“&”，所以它应该在 childClass 的样式块中定义。

如果你想全局定位当前元素中的子节点（例如'& a[href]'），你应该使用 globalStyle。

有用的链接：
https://github.com/seek-oss/vanilla-extract
https://tsh.io/blog/vanilla-extract-library/