Ant Design简称Antd 是基于Ant Design设计体系的React UI组件库 主要用于研发企业级中后台产品
安装
npm install antd -S
使用
导入组件:
import { DatePicker } from 'antd';
全局导入样式:
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
然后在组件中直接用标签形式引用即可:<DatePicker></DatePicker>
import React from 'react';
// Ant Design的日期选择组件
import { DatePicker } from 'antd'
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return <div>
<DatePicker></DatePicker>
</div>
}
}
按需导入
全局导入css样式会导致体积过大
建议使用按需导入 减少bundle.js的体积
首先需要安装babel-plugin-import插件
npm i babel-plugin-import -D
在.babelrc的plugin里添加["import",{"libraryName":"antd","style":"css"}]
例如:
{
"presets":["@babel/preset-env","@babel/preset-react"],
"plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties",["import",{"libraryName":"antd","style":"css"}]]
}
这样 每次使用的时候只需要引入模块即可 无需单独引入样式了
import { DatePicker } from 'antd';