在 create-react-app 中使用AntDesign

$ create-react-app demo // 初始化腳手架並安裝依賴，demo爲項目名
$ cd demo // 進入項目
$ npm start // 啓動複製代碼

$ npm install --save antd複製代碼

一、引入css的形式使用antd組件

修改src/App.js，引入antd的按鈕組件：

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;複製代碼

修改 src/App.css，在文件頂部引入 antd/dist/antd.css：

@import '~antd/dist/antd.css';複製代碼

二、高級配置，按需加載

引入CSS形式，其實是加載了所有的antd組件樣式，再使用其中的部分組件樣式，比較消耗性能。對create-react-app的默認配置進行自定義，使antd按需加載。

$ npm install --save react-app-rewired customize-cra
$ npm install --save babel-plugin-import // 按需加載組件代碼和樣式的babel插件複製代碼

修改 package.json文件：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},複製代碼

在項目根目錄建立config-overrides.js文件修改默認配置：

const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  })
);複製代碼

移除src/App.css中的引入：@import '~antd/dist/antd.css';

修改src/App.js中引入antd的按鈕組件：

import React, { Component } from "react";
// import Button from 'antd/lib/button';
import { Button } from "antd";
import "./App.css";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}
export default App;複製代碼

三、自定義主題

參考官網：ant.design/docs/react/…