如何使用React JS动态修改SASS变量实现明暗主题切换？

嘿，我明白你想实现的效果——通过点击按钮切换Sass变量控制的明暗主题，但这里有个关键问题要先说明：Sass变量是预编译的，也就是说在你的代码打包编译完成后，这些变量就已经被替换成具体的数值了，运行时没法通过JavaScript直接修改它们。不过别担心，我们可以结合CSS自定义属性（也就是CSS变量）和React的状态来实现你要的动态主题切换，下面是具体的实现步骤：

步骤1：调整Sass代码，用CSS变量实现动态主题 #

把原来的静态Sass变量逻辑，改成通过主题类来控制CSS变量的值，这样运行时只要切换类名就能改变主题样式：

// 定义基础CSS变量的默认值（浅色主题）
:root {
  --bgcolor: white;
}

// 深色主题对应的变量值
.dark-theme {
  --bgcolor: black;
}

.Home {
  background-color: var(--bgcolor);
  height: 100vh;
  transition: background-color 0.3s ease; // 加个过渡动画让切换更丝滑
}

步骤2：修改React组件，添加状态管理与切换逻辑 #

在组件里维护一个主题状态，点击按钮时切换状态，同时给容器添加对应的主题类：

import React from 'react';
import './App.scss';

class App extends React.Component {
  // 初始化状态，默认启用浅色主题
  state = {
    isLightTheme: true
  };

  // 主题切换方法
  toggleTheme = () => {
    this.setState(prevState => ({
      isLightTheme: !prevState.isLightTheme
    }));
  };

  render() {
    const { isLightTheme } = this.state;
    // 根据状态确定要添加的主题类名
    const themeClass = isLightTheme ? '' : 'dark-theme';

    return (
      <div className={`Home ${themeClass}`}>
        I’m slow and smooth
        <button onClick={this.toggleTheme}>
          {isLightTheme ? 'Switch to Dark Theme' : 'Switch to Light Theme'}
        </button>
      </div>
    );
  }
}

export default App;

补充：函数式组件版本（如果偏好Hook写法） #

如果你习惯用React函数式组件，用useState钩子就能实现同样的逻辑：

import React, { useState } from 'react';
import './App.scss';

function App() {
  const [isLightTheme, setIsLightTheme] = useState(true);

  const toggleTheme = () => {
    setIsLightTheme(prev => !prev);
  };

  const themeClass = isLightTheme ? '' : 'dark-theme';

  return (
    <div className={`Home ${themeClass}`}>
      I’m slow and smooth
      <button onClick={toggleTheme}>
        {isLightTheme ? 'Switch to Dark Theme' : 'Switch to Light Theme'}
      </button>
    </div>
  );
}

export default App;

这种方案的核心思路是：用运行时生效的CSS变量替代预编译的Sass变量，再通过React状态控制类名切换，从而实现动态的主题切换效果，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Nikhil Patil