七、React中UI组件库的使用——antd

一、在React脚手架中使用antd组件库

• 基于React封装UI组件库，其中Ant Design是比较常用的
• 安装：

npm install antd

• 使用：
  官方文档：Antd中组件的使用

• 注意：引入样式后，样式才能生效

import  'antd/dist/antd.css'

二、自定义主题和按需引入

• 使用antd组件库时，整个主题默认的是蓝色，若是在开发中不想使用蓝色，那么也可以根据自己的需要，对主题色进行更改
• 前面使用 import ‘antd/dist/antd.css’ 来引入样式，是将antd中所有的样式一次性全部引入了，但是有的时候我们并不需要这么多样式（负担大），那么也可以根据需要按需引入
• 实现：

1.安装依赖：npm install react-app-rewired customize-cra babel-plugin-import less less-loader
一次性引入所有需要的依赖
2. 修改package.json中的配置：

"scripts": {
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-scripts eject"
	},

3. 根目录下创建config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} =require('customize-cra');
	module.exports = override(
	fixBabelImports('import', {
	libraryName: 'antd',
	libraryDirectory: 'es',
	style: true,
	}),
	addLessLoader({
	lessOptions:{
	javascriptEnabled: true,
	modifyVars: { '@primary-color': 'blue' },
//设置@primary-color的值，即更改主题的颜色，这里使用的是blue
		}
	}),
);

4. 此时不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css’应该删掉

• 也可参考官方文档：高级配置：主题配置