在 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/…