react+less切换皮肤

项目需求——呈现亮、暗两种风格

思路：通过改变最外层div的class结合less的参数来实现。简单使用容易理解
实例：
页面

<div className={styles.theme_dark}>
    <div>我是内容...</div>
</div>

.less

.theme_dark{
    @bg-color: black;
    @word_color:white;
    .theme(@bg-color,@word_color);
}
.theme_light{
    @bg-color: white;
    @word_color:black;
    .theme(@bg-color,@word_color);  
}
.theme(@bg-color,@word_color){
    width: 100%;
    height: 2rem;
    background: @bg-color;
    &>div{
        color: @word_color;
    }
    //其他的页面样式正常的往下写就可以========================
}

效果：
.theme_dark

.theme_light

理解：
1.只需要动态的改变页面中的className的值即可实现不同的风格，当然除了颜色，也可以有其他参数的变更。例如，尺寸
2.不管是哪个class样式都会走到.theme(){} 这里（所以这里存放的是页面原本所有的样式），class不同，接收的参数就不同，从而实现样式的不同