如何在React中替换SCSS变量前缀或修改变量值？

你想要不用修改类名就能切换primary_和bluish_前缀的变量，或者直接修改primary_变量的值，这里有几个可行的方案：

1. 用SCSS映射（Map）+ 混合宏（Mixin）实现主题切换 #

这种方法把主题变量统一管理成映射，通过混合宏自动生成不同主题下的样式，React只需要切换根元素的主题类即可，不用修改变量前缀。

首先定义主题映射：

$themes: (
  primary: (
    background: #1E1E1E,
    button: #F2F2F2,
    sharp: #171717,
    button_active: #9D9D9D,
    sharp_active: #2D2D2D
  ),
  bluish: (
    background: #0C002D,
    button: #C2C1EF,
    sharp: #04001E,
    button_active: #5F52AE,
    sharp_active: #0C0054
  )
);

// 定义混合宏，根据主题和属性生成样式
@mixin theme-property($property, $key) {
  @each $theme-name, $theme-map in $themes {
    .theme-#{$theme-name} & {
      #{$property}: map-get($theme-map, $key);
    }
  }
}

然后在样式中使用这个混合宏：

.button_active {
  @include theme-property(background-color, button_active);
}

.button_text_hidden {
  @include theme-property(color, button);
}

React中只需要给根容器切换主题类：

import { useState } from 'react';

function App() {
  const [activeTheme, setActiveTheme] = useState('primary');

  const toggleTheme = () => {
    setActiveTheme(prev => prev === 'primary' ? 'bluish' : 'primary');
  };

  return (
    <div className={`theme-${activeTheme}`}>
      <button onClick={toggleTheme}>切换主题</button>
      <div className="button_active">激活状态按钮</div>
      <div className="button_text_hidden">隐藏文本样式</div>
    </div>
  );
}

2. 转用CSS自定义属性（变量）动态修改 #

把SCSS变量转成CSS全局变量，这样可以在React中通过JS直接修改变量值，或者切换类名来覆盖变量，完全不用改原有的样式引用。

首先在SCSS中定义CSS变量：

:root {
  --primary-background: #1E1E1E;
  --primary-button: #F2F2F2;
  --primary-button-active: #9D9D9D;
  // 其他变量同理
}

// 定义bluish主题的变量覆盖
.theme-bluish {
  --primary-background: #0C002D;
  --primary-button: #C2C1EF;
  --primary-button-active: #5F52AE;
  // 其他变量同理
}

然后在样式中引用CSS变量：

.button_active {
  background-color: var(--primary-button-active);
}

.button_text_hidden {
  color: var(--primary-button);
}

React中两种切换方式：

• 方式一：切换根类（和方案1类似）
• 方式二：直接用JS修改变量：

const switchToBluish = () => {
  const root = document.documentElement;
  root.style.setProperty('--primary-background', '#0C002D');
  root.style.setProperty('--primary-button', '#C2C1EF');
  root.style.setProperty('--primary-button-active', '#5F52AE');
  // 其他变量依次设置
};

3. 编译时切换主题（仅静态场景） #

如果不需要动态切换，只是编译时确定用primary还是bluish主题，可以用SCSS的条件判断：

// 默认主题为primary，可在编译前修改
$current-theme: primary !default;

@if $current-theme == primary {
  $background: $primary_background;
  $button: $primary_button;
  $button_active: $primary_button_active;
} @else if $current-theme == bluish {
  $background: $bluish_background;
  $button: $bluish_button;
  $button_active: $bluish_button_active;
}

.button_active {
  background-color: $button_active;
}

.button_text_hidden {
  color: $button;
}

这种方法只能在编译前修改$current-theme的值，无法在React运行时切换，适合不需要动态切换主题的场景。

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