Блог

Я использую document.documentElement.style.setProperty(«x», «y») для изменения значений переменных css, и по какой-то причине это на самом деле их не меняет. Когда я проверяю приложение с помощью инструментов разработки, переменные меняются вверху, но не внизу, и я не уверен, почему.

Вот файл с переменными css в публичном репо:
https://github.com/Neidz/fm_social-media-dashboard/blob/master/src/components/styles/variables.scss
А вот файл react, который изменяет переменные 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); }  

Я делаю это с помощью элемента ввода

 lt;input type="checkbox" className="modeInput" onChange={() =gt; setDarkMode(!darkMode)} /gt;  

что вызывает эффект использования, потому что состояние меняется

 useEffect(() =gt; {  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]);  

Нет никаких проблем с эффектом использования, потому что, если я попытаюсь утешить.войдите в то место, где переменные должны измениться, это работает просто отлично.

Проблема решается, когда я определяю переменную css в :root вместо*, поэтому правильный css выглядит так:

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

React/javascript остается точно таким же