一.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 runeject

但是這樣操作是不可逆的，對於熟悉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.下載安裝lessless-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