react+antd修改主题色

第一步：安装需要的插件

npm install react-app-rewired customize-cra babel-plugin-import less less-loader

第二步：修改package.json文件

        将原本：

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

        修改为：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

第三步：在根目录下创建名为config-overrides.js文件，并填入以下代码：

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

module.exports = override(
  //写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true, //这里一定要写true，css和less都不行哦
  }),
  addLessLoader({
    javascriptEnabled: true,
    //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
    modifyVars: {
      dark: true,
      '@primary-color': '#009688',
      //   'primary-color': '#fc9153',
      'link-color': '#009688',
      'text-color': '#666666',
      'error-color': '#f56c6c',
      'success-color': '#1b733e',
      'waring-color': '#ffd00b',
      'heading-color': '#272933',
    },
  })
)

除了全局主题色，可以修改其他：

@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, .85);              // 标题色
@text-color: rgba(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, .15);  // 浮层阴影

完成！

文章摘自react小白的成长之路（三）react中使用antd并改变其主题颜色的正确打开方式 - 简书