[&_.recharts-tooltip-cursor]:fill-zinc-200 是什么意思？

Question

我遇到了这段代码。我以前在编写 Tailwind CSS 时从未见过这种语法。我不确定这是 JSX 功能还是 Tailwind CSS 功能。有谁知道这段代码的含义吗？有相关链接可以提供吗？

<BarChart className="[&_.recharts-tooltip-cursor]:fill-zinc-200">

有谁知道这段代码的含义吗？有相关链接可以提供吗？

Answer 1

你所拥有的称为“任意变体”。任意变体只是表示 css 选择器的格式字符串，用方括号括起来。它们用于修改或将样式应用到具有特定类名的元素。 在您提供的代码中，它用于将

fill-zinc-200

应用于您添加类的元素内具有

.recharts-tooltip-cursor

类的所有元素。

&

符号指的是父选择器，在本例中是当前元素（条形图）。

_

（下划线）是一种约定，表示一个类是另一个类的变体或修饰符。总之，

<BarChart>

元素被分配类

recharts-tooltip-cursor

，并且其SVG元素的

fill

属性将被设置为由Tailwind CSS调色板中的

zinc-200

颜色定义的颜色。您可以参考以下有用的链接，了解有关 TailwindCSS 自定义样式的更多信息

使用任意值
使用任意变体
希望这有帮助。干杯！