React + antd 主题更换

配置

less的配置，用的是antd4版本less版本为10
所以配置webpack.config.js：

{
			  test: /\.(css|less)$/,
			  use: [
			    { loader: "style-loader"},
			    { loader: "css-loader"},
			    {
			      loader: "less-loader",
			      options: {
			        lessOptions: {
			          javascriptEnabled: true,
					  modifyVars: themeAntd
			        },
			      },
			    },
			  ],
			},

这里面modifyVars是默认的自定义配置themeAntd

引入

theme-color.less定义的是要自定义改变的样式和变量，后期通过改变变量的值改变这里面的样式。后面要更改主题的组件的样式都要在这里面重写和定义。

<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/static/css/theme-color.less" />
	<script type="text/javascript" src="%PUBLIC_URL%/static/js/less.min.js"></script>

使用

window.less.modifyVars({'@text-color': 'red' });
window.less.refreshStyles();

你可能触发事件之后依然无法改变，这是因为如果要改变变量值，首先要在theme-color.less定义这个变量，并使用它，才会发生变化。不然看不到任何变化。

报错

Inline JavaScript is not enabled. Is it set in your options

这种报错是因为配置的时候没有加javascriptEnabled: true。