0

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

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

 <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,
})
4

1 回答 1

2

您可以&在 CSS 选择器的帮助下使用符号，nth-child如下所示：

编辑：这个片段代码根本不起作用:(

  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在本例中表示。

编辑：正如 vanilla extract 文档指出的那样：为了提高可维护性，每个样式块只能针对单个元素。要强制执行此操作，所有选择器必须以“&”为目标 字符，它是对当前元素的引用。

例如，'&: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/

于 2022-01-02T07:48:42.883 回答