React全家桶笔记（七）：React UI组件库 — Ant Design实践React全家桶笔记（七）：React

React全家桶笔记（七）：React UI组件库 — Ant Design实践

本篇介绍 React 生态中最流行的 UI 组件库 Ant Design 的使用，包括基本使用、按需引入和自定义主题。 📺 对应张天禹react全家桶视频：P94 - P96

一、流行的 React UI 组件库

1.1 国内

Ant Design（蚂蚁金服）— React 生态最流行的 UI 库 ✅
Ant Design Mobile — Ant Design 的移动端版本
TDesign（腾讯）— 企业级设计体系
Arco Design（字节跳动）— 企业级设计系统
Semi Design（抖音）— 现代化设计系统

1.2 国外

Material UI（Google Material Design 风格）— 国外最流行
Chakra UI — 简洁、模块化
Mantine — 功能丰富，开发体验好

🔗 概念扩展：UI 组件库的价值 UI 组件库提供了一套经过设计和测试的通用组件（按钮、表格、表单、弹窗等），让开发者不需要从零造轮子，专注于业务逻辑。选择组件库时主要考虑：社区活跃度、文档质量、定制能力、包体积。

二、Ant Design 基本使用（P94）

2.1 安装

npm install antd

2.2 基本使用

import React, { Component } from 'react'
import { Button, DatePicker } from 'antd'
import 'antd/dist/antd.css'  // 引入全量样式

const { RangePicker } = DatePicker

export default class App extends Component {
  render() {
    return (
      <div>
        App...
        <button>原生按钮</button>
        <Button type="primary">Antd 主按钮</Button>
        <Button>Antd 默认按钮</Button>
        <Button type="dashed">Antd 虚线按钮</Button>
        <Button danger>Antd 危险按钮</Button>
        <DatePicker />
        <RangePicker />
      </div>
    )
  }
}

使用步骤：

安装 antd：npm install antd
引入组件：import { Button } from 'antd'
引入样式：import 'antd/dist/antd.css'
直接使用组件

⚠️ 问题：import 'antd/dist/antd.css' 会引入 antd 的全量样式（几百 KB），即使你只用了一个 Button，也会把所有组件的样式都打包进来。

三、Ant Design 样式的按需引入（P95）

3.1 问题

全量引入样式文件体积太大，影响首屏加载速度。我们需要按需加载：用了哪个组件，就只引入哪个组件的样式。

3.2 方案：使用 react-app-rewired + customize-cra

npm install react-app-rewired customize-cra babel-plugin-import

修改 package.json：

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

在项目根目录创建 config-overrides.js：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',  // 自动按需引入 CSS
  })
)

使用时不再需要手动引入样式：

import React, { Component } from 'react'
import { Button } from 'antd'
// 不需要再写 import 'antd/dist/antd.css'
// babel-plugin-import 会自动按需引入对应组件的样式

export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">按需引入</Button>
      </div>
    )
  }
}

🔗 概念扩展：react-app-rewired 是什么？ CRA（Create React App）默认不暴露 webpack 配置。如果想修改配置，要么 npm run eject（不可逆），要么用 react-app-rewired 在不 eject 的情况下覆盖配置。customize-cra 提供了一系列便捷的配置覆盖函数。

💡 Antd 5.x 更新：Ant Design 5.x 版本已经内置了按需加载，使用 CSS-in-JS 方案，不再需要 babel-plugin-import。直接 import { Button } from 'antd' 即可，样式会自动按需注入。教程中的配置适用于 Antd 4.x 及以下版本。

四、Ant Design 自定义主题（P96）

4.1 需求

Ant Design 默认主题色是蓝色（#1890ff），如果项目需要其他主题色（如红色、绿色），需要自定义主题。

4.2 Antd 4.x 方案：Less 变量覆盖

npm install less less-loader

修改 config-overrides.js：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,  // 改为 true，加载 less 文件（而非 css）
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      // 自定义主题色
      modifyVars: { '@primary-color': '#1DA57A' },
    },
  })
)

修改后重启项目，所有 antd 组件的主题色就变成了绿色 #1DA57A。

4.3 Antd 5.x 方案：ConfigProvider

import { ConfigProvider, Button } from 'antd'

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1DA57A',
          borderRadius: 6,
          fontSize: 14,
        },
      }}
    >
      <Button type="primary">自定义主题</Button>
    </ConfigProvider>
  )
}

💡 Antd 5.x 的主题定制更加简单直观，通过 ConfigProvider 的 theme 属性即可配置，不再需要 Less 变量覆盖。

4.4 常用的可自定义变量（Antd 4.x）

@primary-color: #1890ff;          // 主题色
@link-color: #1890ff;             // 链接色
@success-color: #52c41a;          // 成功色
@warning-color: #faad14;          // 警告色
@error-color: #f5222d;            // 错误色
@font-size-base: 14px;            // 主字号
@heading-color: rgba(0,0,0,0.85); // 标题色
@text-color: rgba(0,0,0,0.65);    // 主文本色
@border-radius-base: 2px;         // 组件/浮层圆角
@border-color-base: #d9d9d9;      // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0,0,0,0.12); // 浮层阴影

五、实际项目中使用 Antd 的建议

Antd 使用建议：
├── 版本选择
│   ├── 新项目推荐 Antd 5.x（CSS-in-JS，无需额外配置）
│   └── 老项目维护可能还在 4.x（需要按需引入配置）
├── 按需引入
│   ├── Antd 5.x：内置按需加载，直接用
│   └── Antd 4.x：babel-plugin-import
├── 主题定制
│   ├── Antd 5.x：ConfigProvider + theme
│   └── Antd 4.x：Less 变量覆盖
├── 国际化
│   └── ConfigProvider 的 locale 属性
├── 图标
│   └── @ant-design/icons 独立包，按需引入
└── 文档
    └── ant.design — 组件 API 和示例非常详细

🎯 面试高频：你在项目中是如何使用 Ant Design 的？

安装 antd，按需引入组件
通过 ConfigProvider（5.x）或 Less 变量（4.x）自定义主题
使用 ProComponents（高级组件）处理复杂表格、表单场景
通过 ConfigProvider 配置国际化
对于特殊需求，基于 antd 组件二次封装

本章知识图谱

React UI 组件库
├── Ant Design
│   ├── 安装：npm install antd
│   ├── 使用：import { Button } from 'antd'
│   ├── 按需引入
│   │   ├── 5.x：内置，无需配置
│   │   └── 4.x：babel-plugin-import + react-app-rewired
│   └── 自定义主题
│       ├── 5.x：ConfigProvider theme
│       └── 4.x：Less modifyVars
├── 工程化工具
│   ├── react-app-rewired：不 eject 修改 CRA 配置
│   ├── customize-cra：便捷配置覆盖
│   └── babel-plugin-import：按需加载插件
└── 其他选择
    ├── Material UI（国外主流）
    ├── Arco Design（字节）
    └── TDesign（腾讯）

📌 下一篇：[React全家桶笔记（八）：Redux与React-Redux状态管理] 将进入 React 状态管理的核心 — Redux，学习集中式状态管理的设计思想和实践。