antd的简单使用(主要参考官网文档)
antd的使用
1、添加antd
安装:
yarn add antd
使用:
引入:想在哪个组件用,就在哪个组件引入
import {Button} from antd
引入样式:
import antd/dist/antd.css
2、优化antd,按需引入样式
配置按需引入:
(参考官网的在 create-react-app 中使用文档) 1.切到文档的【高级配置】 2.yarn add react-app-rewired customize-cra 3.修改package.json(看文档) “scripts”: { “start”: “react-app-rewired start”, “build”: “react-app-rewired build”, “test”: “react-app-rewired test”, “eject”: “react-scripts eject” }, 4.建立:config-overrides.js(具体内容,参考官网) 5.yarn add babel-plugin-import 6.修改config-overrides.js文件(具体内容,参考官网) 7.删除掉App.js中的antd.css的引入
配置自定义主题样式:
1.切到文档的自定义主题 2.yarn add less less-loader@5(下载5版本的,并按照官网提示操作。6版本可能会报错) 3.修改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: red }, }), );