未应用CSS变量

我试图使用CSS变量，但有些奇怪的事情正在发生。 我这样声明变量：

：根目录{
--初级：“#fff”；
--黑色：“1b1f23”；
--格雷：“586069”；
--橙色：“#f9826c”；
--标志:"fff"；
--标题：“#24292e”；
--搜索：“rgba（255；255；255；0.13）”；
}

然后我就这样使用它们：

输入{
背景：var（--search）；
}

但由于某种原因，这种风格没有得到应用。 当我将鼠标悬停在Chrome Devtools中的变量上时，它会显示正确的值，但不适用

我对如何使它起作用很迷茫

编辑： 我使用的是React，因此这是渲染

---

您的代码有一些问题。变量值不需要是字符串。和

rgba（255；255；255；0.13）

应该用逗号而不是分号分隔。这就是rgba（255，255，255，0.13）。风格正在被运用；您只是没有注意到差异，因为

rgba（255，255，255，0.13）

仍然是白色的。因此

：root

的正确CSS是：

：根目录{
--初级：#fff；
--黑色：#1b1f23；
--灰色:#586069 ;；
--橙色：#f9826c；
--标志：#fff；
--标题：#24292e；
--搜索：rgba（255、255、255、1）；
}

例如：

：根目录{
--初级：#fff；
--黑色：#1b1f23；
--灰色:#586069 ;；
--橙色：#f9826c；
--标志：#fff；
--标题：#24292e；
--搜索：rgba（255，25，255，0.5）；/*颜色为粉红色，因此我们可以实际看到它工作*/
}
输入{
背景：var（--search）；
}

---

请添加您的HTML。像这样帮忙很难。或者提供一个最小的工作示例不要将属性值放在引号

--搜索中：“rgba（255；255；255；0.13）”哦，我明白了，我从第三方文件导入了这些样式，甚至没有意识到引号是问题所在，甚至没有在错误的位置看到分号，谢谢！它现在好像在工作