一、Antd(Ant Design)的使用：引入全部Css樣式
1.1 antd官網：
https://ant.design/docs/react/introduce-cn
1.2 React中使用Antd
1、在項目根目錄安裝antd【每個項目都安裝一次】：
npm install antd --save / yarn add antd / cnpm install antd --save
2、在您的react項目的css文件中引入Antd的css【會引入所有css樣式】：
@import '~antd/dist/antd.css';
3、使用具體組件（看文檔使用）例如使用Button：
1、在對應的組件中引入Antd： import { Button } from 'antd';
2、在render()中寫入組件： <Button type="primary">Primary</Button>
1.3 代碼示例
1.安裝
2.引入antd的css樣式
因為在App.js里引入了App.css所以就在App.css頭部引入：
@import '~antd/dist/antd.css';
3.在App.js里使用Antd的按鈕組件、小圖標組件
在官網查找組件：https://ant.design/docs/react/introduce-cn
import React from 'react';
import './App.css';
import {Button,Icon} from 'antd'; //引入Antd的按鈕組件、小圖標組件
function App() {
return (
<div>
{/* 使用antd按鈕組件 */}
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
<Button type="link">Link</Button> <br/>
{/* 使用小圖標組件 */}
<Icon type="step-forward" />
</div>
);
}
export default App;
效果：
其中的圖標樣式其實是字體，可以直接改變顏色（此處內嵌樣式，也可以外鏈樣式表）：
<Icon type="step-forward" style={{color:'red'}} />
4.使用日歷組件
import React, { Component } from 'react';
import {Calendar} from 'antd';
class Home extends Component {
constructor(props){
super(props);
this.state={ }
}
//獲取日歷的參數
Change=(value, mode)=>{
console.log(value, mode);
}
render() {
return (
<div>
Calendar：
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} onPanelChange={this.Change} />
</div>
</div>
);
}
}
export default Home;
二、React用Antd高級配置，按需引入css樣式配置：
【官方文檔】：
https://ant.design/docs/react/use-with-create-react-app-cn#高級配置
【為什么按需引入css】一步中已經成功使用antd，但在實際開發過程中還有很多問題，例如上面的例子實際上加載了全部的 antd 組件的樣式（對前端性能是個隱患）。
【按需引入配置方法】
1、安裝antd：
見一章
2、安裝（react-app-rewired）一個對 create-react-app 進行自定義配置的社區解決方案 ：
yarn add react-app-rewired
或
cnpm install react-app-rewired --save
新版還需安裝：
yarn add customize-cra
或(此庫不可用建議用yarn)
cnpm install rcustomize-cra --save
3、修改 package.json：
react-scripts 需改為 react-app-rewired：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
}
4、在項目根目錄創建一個 config-overrides.js 用於修改默認配置：
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
5、安裝babel-plugin-import （是一個用於按需加載組件代碼和樣式的 babel 插件）：
yarn add babel-plugin-import
或
cnpm install babel-plugin-import --save
6、修改 config-overrides.js
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
7、然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 直接引入組件使用就會有對應的css
import { Button } from 'antd';
<Button type="primary">Primary</Button>
三、自定義主題
1)安裝依賴
yarn add less less-loader
或
cnpm install less less-loader
2）修改二步的config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
);
3）重啟項目
重啟 yarn start 或 npm start
效果：看到按鈕變綠色即成功
