在ReactJs中如何通过编程方式动态设置SCSS变量值

首先要明确：SCSS是预处理语言，仅在项目构建阶段生效，编译完成后所有$开头的SCSS变量都会被替换为固定色值，运行时无法直接修改SCSS变量本身。你可以通过SCSS变量绑定CSS原生自定义属性的方案实现需求，原有项目代码几乎不需要大范围修改，具体步骤如下：

步骤1：改造SCSS变量定义 #

把你原来的SCSS变量绑定到CSS原生自定义属性上，保留原有默认值兼容旧逻辑：

/* 原有写法：$primary-color: #fec00b; */
/* 改造后写法 */
:root {
  --primary-color: #fec00b;
}
$primary-color: var(--primary-color);

改造完成后，你项目中所有引用$primary-color的代码不用做任何修改，构建后会自动被编译为var(--primary-color)，支持运行时动态修改。

步骤2：React中请求API后动态更新色值 #

拿到API返回的色值后，通过JS直接修改根元素的CSS自定义属性即可：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 请求你的主题配置接口
    fetch('/your/theme/api')
      .then(res => res.json())
      .then(themeConfig => {
        // 获取html根元素
        const rootElement = document.documentElement;
        // 动态覆盖--primary-color的值
        rootElement.style.setProperty('--primary-color', themeConfig.primaryColor);
        // 其他需要动态修改的主题色都可以按照这个方式批量设置
      })
  }, [])

  // 剩余项目逻辑
  return <>{/* 你的项目内容 */}</>
}

如果后续需要做多主题切换功能，也可以把所有主题配置存在React状态中，切换时批量更新对应的CSS自定义属性即可，完全不需要重新构建项目。

内容的提问来源于stack exchange，提问作者Zohab Ali