一.React中使用antd
1.下载antd包
npm i antd -S
2.按需引入
//App.jsx文件
import {Button} from 'antd' //引入按钮组件 import {WechatOutlined, ShoppingCartOutlined } from '@ant-design/icons'; //icon图标库需要另外引入
import 'antd/dist/antd.css' //引入antd的所有样式
3.使用组件
1 export default class App extends Component {
2 state = {
3 size: 'large',
4 };
5
6 render() {
7 return (
8 <div>
9 App...
10 <Button type="primary">Primary Button</Button>
11 <button>点我</button>
12 <Button type="primary" icon="search">
13 Search
14 </Button>
15 <Button icon="search">Search</Button>
16 <WechatOutlined />
17 <Button type="primary" icon="download" size={this.state.size}>
18 Download
19 </Button>
20 <ShoppingCartOutlined />
21 </div>
22 )
23 }
24 }
4.效果
二.修改react默认配置
打开一个react项目，我们看到的 create-react-app 生成的默认目录结构如下
没有webpack.config.js配置文件，因为项目为了防止我们胡乱修改导致项目崩溃，帮我们隐藏了。如果我们想要修改webpack.config.js文件该如何呢？
方法一：
直接执行 npm run eject
但是这样操作是不可逆的，对于熟悉webpack配置的人来说，可以随意按照自己的需求修改配置，可以这样操作，但是对于不了解webpack的小伙伴建议看第二种方法。
方法二：
1 下载react-app-rewired 和 customize-cra
yarn add react-app-rewired customize-cra 或者 npm i react-app-rewired customize-cra
其中customize-cra 用于执行 config-overrides.js中的修改规则
当customize-cra修改config-overrides.js中的规则时，需要react-app-rewired 用于使用新规则（react-app-rewired 替换 react-scripts）启动脚手架，此时需要重新配置package.json文件（见第3步骤）
2.在项目根目录创建一个 config-overrides.js 用于修改默认配置。
1 //config-overrides.js
2 module.exports = function override(config, env) {
3 // do stuff with the webpack config...
4 return config;
5 };
在这个文件的方法中可以修改webpack配置，又不会破坏react项目的原有配置
3.修改package.json文件
1 "scripts": {
2 "start": "react-app-rewired start",
3 "build": "react-app-rewired build",
4 "test": "react-app-rewired test",
5 "eject": "react-scripts eject"
6 },
4.重新启动项目，配置即可生效
三.antd样式的按需引入
1.原因：项目中只是使用了antd中的部分组件，但是却加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb），这样造成的结果是项目打包后体积过大，所以此时我们需要对 create-react-app 的默认配置进行自定义
2.按需引入操作：
说明：在基于上一节使用方法二修改webpack的基础上进行配置
2.1 安装babel-plugin-import ：是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
yarn add babel-plugin-import 或者 npm i babel-plugin-import
2.2修改 config-overrides.js 文件
1 const { override, fixBabelImports } = require('customize-cra');
2
3
4 module.exports = override(
5 fixBabelImports('import', {
6 libraryName: 'antd',
7 libraryDirectory: 'es',
8 style: 'css',
9 }),
10 );
2.3 移除前面在 src/App.jsx 里全量添加的 @import 'antd/dist/antd.css'; 样式代码
2.4 最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息
这时你能发现没有在页面中手动引入样式，但是组件样式依然存在，正常显示。
四.自定义主题
按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件
1.下载安装less less-loader
yarn add less less-loader 或者 npm i less less-loader
2.修改文件
1 //配置具体的修改规则
2 //config-overrides.js
3 const { override, fixBabelImports, addLessLoader } = require('customize-cra');
4 const themeColor = require('./theme-color-config')
5
6 module.exports = override(
7 fixBabelImports('import', {
8 libraryName: 'antd',
9 libraryDirectory: 'es',
10 style: true,
11 }),
12 addLessLoader({
13 lessOptions:{
14 javascriptEnabled: true,
15 modifyVars: { ...themeColor },
16 }
17 }),
18 );
其中 theme-color-config.js文件也是位于根目录下的，主要用来配置具体的主题样式
1 //主题颜色配置
2 //theme-color-config.js
3 module.exports = {
4 '@primary-color': '#FF0000',
5 '@table-bg': '#FFC0CB',
6 }
可以参考 配置主题 文档配置。
3.最后npm run start重新启动项目即可
参考：https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE
https://www.cnblogs.com/haimengqingyuan/p/13380508.html