如何使用香草精设计子元素的样式？

Question

我开始使用 vanilla extract 来设计 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,
})

Answer 1

您不需要创建一个新的CSS 类来定位li元素，但您确实需要有两个不同的CSS 规则，无论您使用什么预处理器或使用纯 CSS。

请记住您将用纯 CSS 编写的内容：

.some-specific-ul {
    margin: 4em;
}

.some-specific-ul > li {
    color: grey;
}

使用 vanilla-extract 编写的内容几乎相同。唯一的区别是类名不再是硬编码的，而是以某种方式生成的。不过，您可以在多个规则中使用类名。

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

export const ul = style({
    margin: '4em',
});

globalStyle(`${ul} > li`, {
    color: 'grey',
});

在这两种情况下，您只需要一个类来应用于ul元素，并且li元素也会自动设置样式。在第二种情况下，仅ul导出类名，这是有道理的：没有办法强制规则li，它只能根据父级自动应用ul。

现在，还要记住，如果您滥用“神奇的应用规则”，您的代码可能会变得难以维护。随着规则数量和元素层次结构深度的增加，人们将不知道样式来自哪里。我相信有一个点，超过这个点就值得明确你所应用的样式。它在底层创建了 CSS 类，但你不应该关心它。

想象：

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

export const ul = style({
    margin: '4em',
});

export const li = style({
    color: 'grey',
});

import * as React from "react";
import * as classNames from "./my-list.css";

export const MyList: React.FC<{ items: string[] }> = ({ items }) => (
    <ul className={classNames.ul}>
        {items.map(item => (
            <li key={item} className={classNames.li}>{item}</li>
        )}
    </ul>
);

最重要的建议是，您的样式文件看起来是一样的，您将损失一点时间来编写额外的类名，但您将获得更多的维护时间。

Answer 2

您可以&在 css 选择器的帮助下使用符号，就像nth-child您的样式一样，如下所示：

\n

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

\n

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

\n

事实上，&就像您在 css 中所知道的那样表示您的样式。.class-name:nth-child。class-name&在此示例中表示。

\n

编辑：\n正如原版提取文档所述：\n为了提高可维护性，每个样式块只能针对单个元素。为了强制执行此操作，所有选择器都必须以 \xe2\x80\x9c&\xe2\x80\x9d 字符为目标，该字符是对当前元素的引用。

\n

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

\n

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

\n

例如，[ & ${childClass}] 无效，因为它不\xe2\x80\x99t 目标\xe2\x80\x9c&\xe2\x80\x9d，因此应该在 childClass 的样式块中定义它。

\n

如果要全局定位当前元素内的子节点（例如\'& a[href]\'），则应使用 globalStyle。

\n

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

\n