能否基于data属性覆盖SCSS变量？React主题开发求助

你的代码无法生效的核心原因是：SCSS变量（如$theme）是编译时变量，编译完成后就会被替换成固定值，没办法在浏览器运行时通过data-theme属性动态修改。你在[data-theme="dark"]里修改的$theme只在该选择器的局部作用域内有效，但get-palette函数引用的是全局的$theme变量，所以根本不会触发动态切换。

下面提供两种可行的实现方式，适配你的React主题需求：

方法1：使用SCSS混合宏（@mixin）生成主题样式 #

通过遍历$themes映射，为每个主题生成对应[data-theme]选择器下的样式规则：

$themes: (
    light: (
        bg-color: #1ed760,
        text-color: black, 
    ),
    dark: (
        bg-color: black,
        text-color: white,
    )
);

// 定义混合宏，生成对应主题的样式
@mixin theme-styles {
    // 默认主题（light）
    @include set-theme-styles(light);

    // 遍历其他主题生成样式
    @each $theme-name, $theme-map in $themes {
        @if $theme-name != light {
            [data-theme="#{$theme-name}"] & {
                @include set-theme-styles($theme-name);
            }
        }
    }
}

// 辅助混合宏，设置具体的主题变量样式
@mixin set-theme-styles($theme-name) {
    $theme-map: map-get($themes, $theme-name);
    background-color: map-get($theme-map, bg-color);
    color: map-get($theme-map, text-color);
    // 可添加更多主题属性
}

// 使用示例：在组件类中引入混合宏
.component {
    @include theme-styles;
}

编译后会生成符合预期的CSS规则：

.component {
    background-color: #1ed760;
    color: black;
}
[data-theme="dark"] .component {
    background-color: black;
    color: white;
}

修改html的data-theme属性时，浏览器会自动切换对应的样式。

方法2：结合CSS变量实现动态切换 #

把SCSS主题映射转换成CSS变量，利用CSS变量的运行时特性实现动态切换：

$themes: (
    light: (
        bg-color: #1ed760,
        text-color: black, 
    ),
    dark: (
        bg-color: black,
        text-color: white,
    )
);

// 根元素定义默认主题变量
:root {
    @each $key, $value in map-get($themes, light) {
        --#{$key}: #{$value};
    }
}

// 为每个主题覆盖根元素变量
@each $theme-name, $theme-map in $themes {
    [data-theme="#{$theme-name}"] {
        @each $key, $value in $theme-map {
            --#{$key}: #{$value};
        }
    }
}

// 定义获取变量的SCSS函数（可选，简化调用）
@function get-palette($key) {
    @return var(--#{$key});
}

// 使用示例
.component {
    background-color: get-palette(bg-color);
    color: get-palette(text-color);
}

这种方式更灵活，编译后CSS变量会在运行时根据data-theme动态切换，适合需要频繁切换主题的场景。

在React里，只需修改document.documentElement的data-theme属性即可：

// 切换到深色主题
const switchToDarkTheme = () => {
    document.documentElement.setAttribute('data-theme', 'dark');
};

// 切换到浅色主题
const switchToLightTheme = () => {
    document.documentElement.setAttribute('data-theme', 'light');
};

可以结合React状态管理（如useState、Context）保存当前主题，实现全局主题切换。

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