有没有办法在反应中使用JS动态更新scss变量？

Question

问题

我在 colors.scss 文件中有两个 scss 变量 位置，我只想 更新变量颜色 来自 javascript 基于一个逻辑，

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

更多信息：

我试过 :export{}，但没有用，还 document.documentElement.style.setProperty 使用全局 css 变量。我正在使用 reactjs 进行前端开发。

Answer 1

您无法更新 scss 变量，因为它们在运行时（运行 JS 时）不存在。

您可以制作 2 个类，每个样式一个，并在运行时应用类之一。

Answer 2

您可以将 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');

Is there a way to dynamically update scss variables using JS in react?