使用React+antd修改主题的两种方法

1:使用craco+craco-less+babel-plugin-import

• 步骤一:npm i @craco/craco craco-less babel-plugin-import安装所需依赖
  

• 步骤二:在package.json中修改scripts启动脚本,将react-scripts改为craco
  
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
      },
  

• 步骤三:在根目录下创建craco.config.js (与package.json)同级
  

• 步骤四:craco.config.js添加如下代码
  
    const CracoLessPlugin = require('craco-less');
        module.exports = {
          babel:{
            plugins:[
              [
                "import",
                {
                  "libraryName":"antd",
                  "libraryDirectory":"es",
                  "style":true
                }
              ]
            ]
          },
          plugins: [
            {
              plugin: CracoLessPlugin,
              options: {
                lessLoaderOptions: {
                  lessOptions: {
                    modifyVars: { '@primary-color': '#000000' },
                    javascriptEnabled: true,
                  },
                },
              },
            },
          ],
        };
      
  

• 步骤五:在App.js中将引入的APP.css改成App.less，同时在App.less文件中添加一下内容

2:使用react-app-rewired+customize-cra+babel-plugin-import+less+lessloader

• 步骤一:npm ireact-app-rewired+customize-cra+babel-plugin-import+less+lessloadert安装所需依赖
  

• 步骤二:在package.json中修改scripts启动脚本,将react-scripts改为react-app-rewired
  

• 步骤三:在根目录下创建config-overrides.js文件
  

• 步骤四:在-overrides.js文件添加如下代码
  

3:注意事项

1:在单独引入react组件不要将'antd/dist/antd.min.css'或则 'antd/dist/antd.css'引入,否则子组件在加载的时候会覆盖之前设置的主题色