style.setProperty 更改 html 元素中的 css 变量，但使用这些变量的元素样式不会改变答案

【问题标题】：style.setProperty changes css variables in html element but style of elements using those variables doesn't changestyle.setProperty 更改 html 元素中的 css 变量，但使用这些变量的元素样式不会改变
【发布时间】：2021-11-01 19:23:28
【问题描述】：

我正在使用 document.documentElement.style.setProperty("x", "y") 来更改 css 变量的值，由于某种原因，这实际上并没有改变它们。当我使用开发工具检查应用程序时，变量在顶部而不是在底部发生变化，我不知道为什么。

这是公共仓库中包含 css 变量的文件：
https://github.com/Neidz/fm_social-media-dashboard/blob/master/src/components/styles/variables.scss
这是更改 css 变量的反应文件：
https://github.com/Neidz/fm_social-media-dashboard/blob/master/src/components/topPart.tsx

我正在尝试将所有以 ct 开头的变量值更改为具有相同名称但以 lt 开头的变量

* {
    --ctBackground: var(--dtBackground);
    --ctTopBgPattern: var(--dtTopBgPattern);
    --ctCardBg: var(--dtCardBg);
    --ctText1: var(--dtText1);
    --ctText2: var(--dtText2);
    --ctToggle: var(--dtToggle);

    // light theme
    --ltBackground: hsl(0, 0%, 100%);
    --ltTopBgPattern: hsl(225, 100%, 98%);
    --ltCardBg: hsl(227, 47%, 96%);
    --ltText1: hsl(228, 12%, 44%);
    --ltText2: hsl(230, 17%, 14%);
    --ltToggle: hsl(230, 22%, 74%);

    // dark theme
    --dtBackground: hsl(230, 17%, 14%);
    --dtTopBgPattern: hsl(232, 19%, 15%);
    --dtCardBg: hsl(228, 28%, 20%);
    --dtText1: hsl(228, 34%, 66%);
    --dtText2: hsl(0, 0%, 100%);
    --dtToggle: var(--dtTopBgPattern);
}

我正在使用输入元素这样做

<input type="checkbox" className="modeInput" onChange={() => setDarkMode(!darkMode)} />

因为状态改变而触发 useEffect

useEffect(() => {
        if (darkMode) {
            document.documentElement.style.setProperty("--ctBackground", "var(--dtBackground)");
            document.documentElement.style.setProperty("--ctTopBgPattern", "var(--dtTopBgPattern)");
            document.documentElement.style.setProperty("--ctCardBg", "var(--dtCardBg)");
            document.documentElement.style.setProperty("--ctText1", "var(--dtText1)");
            document.documentElement.style.setProperty("--ctText2", "var(--dtText2)");
            document.documentElement.style.setProperty("--ctToggle", "var(--dtToggle)");
        } else if (!darkMode) {
            document.documentElement.style.setProperty("--ctBackground", "var(--ltBackground)");
            document.documentElement.style.setProperty("--ctTopBgPattern", "var(--ltTopBgPattern)");
            document.documentElement.style.setProperty("--ctCardBg", "var(--ltCardBg)");
            document.documentElement.style.setProperty("--ctText1", "var(--ltText1)");
            document.documentElement.style.setProperty("--ctText2", "var(--ltText2)");
            document.documentElement.style.setProperty("--ctToggle", "var(--ltToggle)");
        }
    }, [darkMode]);

useEffect 没有问题，因为如果我尝试在变量应该更改的地方进行 console.log，它就可以正常工作。

【问题讨论】：

请将您的代码放入您的问题中 - 特别是我们无法从您的描述中看出您正在更改哪些变量以及 JS 如何以及在哪些元素上进行更改。
@AHaworth 完成，感谢您的建议

标签： css reactjs css-variables

【解决方案1】：

当我在 :root 而不是 * 中定义 css 变量时，问题得到解决，所以正确的 css 看起来像这样：

:root {
    --ctBackground: var(--dtBackground);
    --ctTopBgPattern: var(--dtTopBgPattern);
    --ctCardBg: var(--dtCardBg);
    --ctText1: var(--dtText1);
    --ctText2: var(--dtText2);
    --ctToggle: var(--dtToggle);
}

React/javascript 保持不变

【讨论】：