React项目使用 antd 并改变主题色

antd 样式主题自定义

1. 安装antd组件库

   npm i antd --save
   

2. 在index.tsx中引入样式的less文件(引入less，为了自定义主题色)

   import 'antd/dist/antd.less'
   

3. 使用craco：Create React App Configuration Override 用来覆盖配置

   yarn add @craco/craco
   

4. pageage.json中的 scripts中的 react-script 全部替换成 craco（eject 不需要换）

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   

   替换成

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "react-scripts eject"
     },
   

5. 安装依赖 craco-less

     yarn add craco-less
   

6. 在项目根目录新建一个文件craco.config.js

   const CracoLessPlugin = require('craco-less');
   
   module.exports = {
     plugins: [
       {
         plugin: CracoLessPlugin,
         options: {
           lessLoaderOptions: {
             lessOptions: {
               modifyVars: { '@primary-color': '#1DA57A' },
               javascriptEnabled: true,
             },
           },
         },
       },
     ],
   };
   

7. 在craco.config.js中修改modifyVars中的值，就可以进行修改主题变量

   常用的主题变量有：

   @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); // 浮层阴影