$ create-react-app demo // 初始化脚手架并安装依赖,demo为项目名
$ cd demo // 进入项目
$ npm start // 启动
$ npm install --save antd
1、引入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';
2、高级配置,按需加载
引入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;
3、自定义主题