React 自定义主题

1.下载工具包

yarn add less

yarn add less-loader@5.0.0

• less-loader@5.0.0 带上低版本的版本号，不然会报错，不带版本号默认安装最新的版本

this.getOptions is not a function

• 可以使用这两个版本

yarn add less@3.9.0 less-loader@4.1.0

2. 修改配置文件 config-overrides.js

const { override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true,
   }),
   //使用less-loader修改源码中的less变量的值
   addLessLoader({
     javascriptEnabled: true,
     modifyVars: {"@primary-color": "green"} //修改主题颜色为绿色
   })
);

• addLessLoader另外一种写法

addLessLoader({
	lessOptions:{
		javascriptEnabled: true,
		modifyVars: { '@primary-color': 'green' },
	}
}),

3. 重新启动项目

yarn start

4. 主题配置的相关参数

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

• 官方参考文档