有没有办法在React中使用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');