javascript - 有没有办法在 react 中使用 JS 动态更新 scss 变量？

Question

问题
我有两个 scss 变量 位于 colors.scss文件，我要 仅更新可变颜色 来自 javascript 基于一个逻辑，

if(day){
  // update $backgroundColor to white
}else{
  // update $backgroundColor to black
}

更多信息:
我试过 :export{}哪个不起作用，还有 document.documentElement.style.setProperty使用全局 CSS 变量。我正在使用 react js 用于前端开发。

Answer 1

您可以将 css 变量分配给 $backgroundColor作为

:root {
  --background-color: white;
}
$backgroundColor: var(--background-color);

并将js中的变量更新为

 const day = true;
 const root = document.documentElement;
 root.style.setProperty('--background-color', day ? 'white' : 'black');