React中自定义Antd主题色

Antd官网也介绍了几种定制主题的方法，示例代码中用的是 less 提供的 modifyVars 的方式进行覆盖变量

Antd官网：https://ant.design/docs/react/customize-theme-cn

Antd官方提供了示例代码（git直接拉）：https://github.com/ant-design/create-react-app-antd.git

1.安装

yarn add antd   //首先安装antd
yarn add @craco/craco   //一个对 create-react-app 进行自定义配置的社区解决方案
yarn add craco-less   //用来配置修改craco.config.js文件

2.配置文件craco.config.js

  在根目录下新建一个craco.config.js文件，然后写入这段代码，需要修改主题色直接修改primary-color即可，修改完之后如果没效果的话可以重新yarn start启动试一下（因为官网拉下来的示例代码就需要重启）

//craco.config.js文件

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },   //全局主色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

3.启动项设置

修改 package.json 里的 scripts 属性

 4.引入less

     在主文件index中引入

 效果如下

               

这个就是全局主色的简单修改和配置 ，还有其他的属性Antd官网也有给到，根据需求进行相应调整，以下是一些最常用的通用变量

@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, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

---

分割线：以上方法指针对antd v5之前的版本，v5之后antd自定义主题什么的就比较简单了

/*只需要引入全局配置*/
import { ConfigProvider } from 'antd'


root.render(
	<ConfigProvider 
        theme={{ 
            token: { colorPrimary: "#66DAB0", borderRadius: 3 } 
        }}    
    >
		<Router />
	</ConfigProvider>,
)