less变量切换主题背景色等等（react）

less变量切换主题（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变量,如下

@--color: #ff0033;
.color {
  background: @--color;
  border: 1px solid @--color;
}

第三步：

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

<button className={style.buttonOpenPill + ' color'}}>

第四步：

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

import less from 'less'

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

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