有没有办法在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 变量。我正在使用reactjs进行前端开发。

Answer 1

您可以将 css 变量分配给$backgroundColoras

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

并将 js 中的变量更新为

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