style.setProperty更改了html元素中的css变量，但使用这些变量的元素的样式不变
style.setProperty更改了html元素中的css变量，但使用这些变量的元素的样式不变
提问于 2021-11-01 19:23:28
我正在使用document.documentElement.style.setProperty("x"，( "y")来更改css变量的值，但由于某些原因，这实际上并没有更改它们。当我用dev工具检查app时，变量会在顶部发生变化，而不是在底部，我不知道为什么。
以下是public repo上包含css变量的文件：
https://github.com/Neidz/fm_social-media-dashboard/blob/master/src/components/styles/variables.scss
下面是更改css变量的react文件：
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元素来做这件事
<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，它会工作得很好。
回答 1
Stack Overflow用户
发布于 2021-11-02 18:08:01
当我在:root而不是*中定义css变量时，问题就解决了，所以正确的css看起来像这样：
:root {
--ctBackground: var(--dtBackground);
--ctTopBgPattern: var(--dtTopBgPattern);
--ctCardBg: var(--dtCardBg);
--ctText1: var(--dtText1);
--ctText2: var(--dtText2);
--ctToggle: var(--dtToggle);
}React/javascript保持完全相同
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69801829
复制相关文章
相似问题
腾讯云开发者
