React UI组件库之快速实现antd的按需引入和自定义主题.docxVIP

第

React?UI组件库之快速实现antd的按需引入和自定义主题

目录ReactUI组件库流行的开源ReactUI组件库antd的基本使用antd样式按需引入antd自定义主题总结

ReactUI组件库

流行的开源ReactUI组件库

material-ui（国外）ant-design（国内蚂蚁金服）

antd的基本使用

antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。

安装antd组件库：

npminstallantd--save

yarnaddantd

默认按需引入antd组件：

import{Button,DatePicker}fromantd;

默认按需引入icons图标：

import{WechatOutlined,SearchOutlined}from@ant-design/icons;

默认全部引入antd组件库样式：

importantd/dist/antd.css;

由于全部引入antd组件库样式，会导致文件太大，影响性能问题，所以应该按需引入。

antd样式按需引入

用到哪个组件的样式，就引入哪个组件的样式。参考文档

1.安装react-app-rewired，customize-cra库

npmaddreact-app-rewiredcustomize-cra

react-app-rewired：用于启动react脚手架（因为更新了脚手架的配置，所以不能用原来的命令启动）。

customize-cra：用于执行修改配置的命令。

2.修改package.json文件

scripts:{

start:react-app-rewiredstart,

build:react-app-rewiredbuild,

test:react-app-rewiredtest,

eject:react-scriptseject

3.在项目根目录创建一个config-overrides.js用于修改默认配置

//配置具体的修改规则

module.exports=functionoverride(config,env){

//dostuffwiththewebpackconfig...

returnconfig;

4.安装并使用babel-plugin-import，它是一个用于按需加载组件代码和样式的babel插件。

npmaddbabel-plugin-import

5.修改config-overrides.js文件

//配置具体的修改规则

const{override,fixBabelImports}=require(customize-cra);

module.exports=override(

fixBabelImports(import,{

libraryName:antd,

libraryDirectory:es,

style:css,

完成上述操作，可以移除前面在src/App.css里全部添加样式的代码：importantd/dist/antd.css。最后重启npmstart访问页面，antd组件的js和css代码都会按需加载。

antd自定义主题

按照配置主题的要求，自定义主题需要用到less变量覆盖功能。我们可以引入customize-cra中提供的less相关的函数addLessLoader来帮助加载less样式，同时修改config-overrides.js文件。

1.安装less和less-loader：

npmaddless@5

npmaddless-loader@5

//npmaddlessless-loader@5

less：想要修改less文件需要安装less。

less-loader：修改完之后编译less文件需要安装less-loader。

2.修改config-overrides.js文件：

//配置具体的修改规则

const{override,fixBabelImports,addLessLoader}=require(customize-cra);

module.exports=override(

fixBabe