antd修改全局变量-自定义主题-react

1.引入antd

npm install antd

在App.css中引入antd样式

@import '~antd/dist/antd.css';

1.自定义主题

1.下载工具包

npm install @craco/craco craco-less

2.根目录下创建craco.config.js

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

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

// ‘@primary-color’: '#1DA57A’修改主题色

3.把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

4.修改package.json里的scripts

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

这样再运行项目主题颜色就改变了
官网还提供了很多样式变量