study / React+Sass全局修改界面主题

1.新建一个mixin.scss用来定义对应混合器：

// 定义三种主题颜色
$theme1: #0078d4;
$theme2: #333F5C;
$theme3: #0fbcf5;

// 定义混合器
@mixin backGround($color){
        color: $color;
        // 判断匹配
        [data-theme = "theme1"] & {
                color: $theme1;
        }
        [data-theme = "theme2"] & {
                color: $theme2;
        }
        [data-theme = "theme3"] & {
                color: $theme3;
        }
}

在需要用到的地方引入

@import "./mixin.scss"

.header {
        @include background($theme1);
}

如何一键切换控制全局？
window.document.documentElement.setAttribute('data-theme', 'theme1');
只需要动态修改第二个参数，就能完成全局的样式修改。在第二个参数改变的同时可以进行相关的set State操作将数据保存，在需要用的地方使用，完成。