【第六章-React Ul组件库】

【第六章-React Ul组件库】

• [一、流行的开源 React Ul组件库](#一、流行的开源 React Ul组件库)
• • [1. material-ui (国外)](#1. material-ui (国外))
  • [2. ant-design(国内蚂蚁金服)](#2. ant-design(国内蚂蚁金服))
• [二、ant-design 的使用](#二、ant-design 的使用)
• • [1. 基本使用](#1. 基本使用)
  • • [1.1 安装](#1.1 安装)
    • [1.2 引入并使用](#1.2 引入并使用)
  • [2. 样式的按需引入](#2. 样式的按需引入)
  • • [2.1 安装依赖](#2.1 安装依赖)
    • [2.2 创建 config-overrides.js](#2.2 创建 config-overrides.js)
    • [2.3 使用 babel-plugin-import](#2.3 使用 babel-plugin-import)
    • [2.4 移出全量样式引入](#2.4 移出全量样式引入)
  • [3. 自定义主题](#3. 自定义主题)
  • • [3.1 安装less和less-loader](#3.1 安装less和less-loader)
    • [3.2 重启](#3.2 重启)

---

一、流行的开源 React Ul组件库

1. material-ui (国外)

1. 官网: http://www.material-ui.com/#/

2. github: https://github.com/callemall/material-ui

2. ant-design(国内蚂蚁金服)

1. 官网: https://ant.design/index-cn

2. github: https://github.com/ant-design/ant-design/

---

二、ant-design 的使用

1. 基本使用

Ant Design （简称 antd）是由蚂蚁集团开发的一套企业级中后台 UI 设计语言和 React 组件库。它提供了一系列开箱即用的高质量组件，能大幅提升中后台系统的开发效率。

1.1 安装

npm install antd --save

1.2 引入并使用

以引入按钮 Button 组件为例，在页面中这样编写：

import { Button } from "antd";
// 引入样式
import "antd/dist/antd.css";  // import "antd/dist/antd.less"
...
<Button type="primary">Primary Button</Button>

如果使用图标 Icon，则需要从子库引入：

import { SearchOutlined, AppleOutlined, JavaScriptOutlined} from "@ant-design/icons";
// 引入样式
import "antd/dist/antd.css";  // import "antd/dist/antd.less"
...
<SearchOutlined />
<AppleOutlined />
<JavaScriptOutlined />

2. 样式的按需引入

上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb），为了减小打包体积、加快页面加载速度并避免样式冲突，我们需要对 antd 的样式按需引入。

按需引入官方文档：高级配置

2.1 安装依赖

引入 react-app-rewired 并修改 package.json 里的启动配置，由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。

npm i react-app-rewired customize-cra

package.json：

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

2.2 创建 config-overrides.js

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

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

2.3 使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

• 安装：

npm i babel-plugin-import

• 修改 config-overrides.js 文件：

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

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

2.4 移出全量样式引入

移除前面在 src/App.jsx 里全量添加的 import "antd/dist/antd.css"; 样式代码。

import { Button } from "antd";
...
<Button type="primary">Primary Button</Button>

重新启动，你会发现页面的 antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到警告信息。

3. 自定义主题

自定义主题官方文档：高级配置

3.1 安装less和less-loader

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

npm i less less-loader

config-overrides.js：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

3.2 重启

修改后重启 npm start，如果看到一个绿色的按钮就说明配置成功了。

---