【less】利用less的modifyVars实现react变量切换主题背景色

步骤一

在public文件夹下有入口文件index.html，在入口文件中引入同文件夹下的less文件

<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/theme.less" />

注意：使用link标签，rel为stylesheet/less，type为text/css，href为%PUBLIC_URL%/theme.less

步骤二

在public文件夹下创建theme.less文件并在文件中声明less变量，如下

@--themeColor: #fff000;
.customThemeColor {
    
    
  background: @--themeColor;
  border: 1px solid @--themeColor;
}

步骤三

在使用到切换主题颜色的地方加上公共样式color，如下

<button className={
    
    `${
      
      style.btnStyl} customThemeColor`}}>

步骤四

在切换主题的react文件里导入less

import less from 'less'

点击切换主题触发点击事件时，修改less变量（@–color）的值，其中value值为切换的颜色值。

 less.modifyVars({
    
    '@--themeColor': value})