一.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
按需引入——20221/2/22补充
有时候我们的create-react-app项目已经执行 npm run eject暴露config文件，这时我们应该如何按需引入呢？
首先，依然按照官网中的方法进行配制
其次，修改package.json文件结果如下：
1 //package.json 2 3 { 4 ... 5 "scripts": { 6 "start": "node scripts/start.js", 7 "build": "node scripts/build.js", 8 "test": "node scripts/test.js" 9 }, 10 ...... 11 "babel": { 12 "presets": [ 13 "react-app" 14 ], 15 "plugins": [ 16 [ 17 "import", 18 { 19 "libraryName": "antd-mobile", 20 "style": "css" 21 } 22 ] 23 ] 24 }, 25 ...... 26 }
最后，npm run start重启项目即可
注意：重新启动后可能会出现有些包找不到的情况，重新下载对应的包，再重新启动即可
参考：https://blog.csdn.net/WangQing2508/article/details/109332958