Ant Design是阿里巴巴集团开源的一套企业级UI设计语言和React组件库，自2015年发布以来，已成为中后台领域最受欢迎的UI框架之一。根据最新的行业统计数据，Ant Design在GitHub上拥有超过9万Star，被应用于全球数百万个Web项目，覆盖金融、电商、政务、教育等多个行业。无论你是初学React的新手，还是经验丰富的前端工程师，Ant Design都值得投入时间深入学习。

本文将系统全面地梳理Ant Design 5.x版本的核心知识点，从设计理念到安装配置，从核心组件到主题定制，帮助读者建立完整的知识体系，能够熟练运用Ant Design构建高质量的企业级应用。

一、Ant Design概述

1.1 什么是Ant Design
Ant Design（简称AntD）是由蚂蚁集团体验技术部经过大量项目实践和总结，打磨出的一套企业级产品设计体系。它并非简单的组件堆砌，而是一套融合了设计理念、开发规范和技术实现的完整解决方案，旨在解决企业级产品开发中“设计不一致、开发效率低、维护成本高”的痛点。

Ant Design的核心设计理念可以概括为四个关键词：

1.2 Ant Design的核心价值
在企业级项目开发中，Ant Design的价值体现在以下几个维度：

1. 完善的企业级设计规范
   Ant Design的设计规范覆盖了从色彩、字体、图标到布局、动画的全流程。其“邻近色”配色方案和“黄金比例”字体系统确保了视觉一致性。例如，在表单设计中，AntD强制要求标签左对齐、输入框宽度统一，这种“确定性”设计显著降低了中后台系统的认知成本。

2. 丰富的组件库与场景覆盖
   AntD 5.x版本提供了60+个高质量组件，涵盖基础组件（Button、Input）、数据展示（Table、Tree）、反馈组件（Modal、Notification）等八大类，覆盖企业级产品开发的各类场景。以表格组件为例，其支持固定列、虚拟滚动、树形数据等复杂场景，单表数据量可达10万行而保持流畅。

3. TypeScript深度集成
   AntD从4.0版本开始全面支持TypeScript，所有组件均提供完整的类型定义。这种强类型支持使得IDE能实时提示属性错误，减少70%以上的类型相关bug。

4. 活跃的生态与社区
   Ant Design拥有庞大的插件生态，如antd-mobile（移动端）、ant-design-charts（可视化）、pro-components（高级组件）等，GitHub上每周新增多个第三方组件。

1.3 Ant Design的适用场景
Ant Design主要适用于以下场景：
企业级中后台系统：这是Ant Design最主要的应用场景，其清晰的信息层级、高效的操作流程和专业的视觉风格，非常适合数据密集、操作复杂的企业级应用。
管理系统和仪表盘：丰富的数据展示组件如Table、Tree、Chart等，使Ant Design成为各类管理系统和数据分析平台的理想选择。
需要一致体验的产品套件：对于拥有多个关联产品的企业，Ant Design提供的一致设计语言可以保证用户体验的统一性。
快速原型开发：通过丰富的预设组件，开发者可以快速构建出高质量的产品原型，大幅缩短开发周期。
1.4 Ant Design vs Ant Design Pro

Ant Design Pro是基于Ant Design组件库构建的企业级中后台前端解决方案，内置了丰富的页面模板、预设设计规范、路由配置及状态管理，并提供了ProTable、ProForm等高阶组件，进一步提升了开发效率。

二、安装与配置

2.1 npm安装（推荐）
对于使用Webpack或Vite等构建工具的React项目，推荐使用npm安装方式：

npm install antd --save

2.2 完整引入
在入口文件中完整引入Ant Design：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import 'antd/dist/reset.css';  // v5版本样式引入

createRoot(document.getElementById('root')).render(<App />);

2.3 按需引入（性能优化推荐）
Ant Design 5.0支持Tree Shaking，组件和样式都可以按需引入，无需额外配置：

import { Button, Input, Table } from 'antd';
// 样式会自动按需加载

如果需要进一步优化，可以使用babel-plugin-import插件，但v5版本已不再强制需要。

2.4 通过CDN引入
对于简单页面或非工程化项目，可以直接通过CDN引入：

<link href="https://cdn.jsdelivr.net/npm/antd@5.x/dist/reset.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/react@18.x/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.x/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/antd@5.x/dist/antd.js"></script>

三、设计变量与主题定制

3.1 Design Token三层结构
Ant Design 5.0引入了全新的Design Token系统，将影响主题的最小元素称为Design Token。通过修改Design Token，可以呈现出各种各样的主题。

Design Token采用三层派生结构：

这三组Token并不是简单的分组，而是一个三层的派生关系——由Seed Token派生Map Token，再由Map Token派生Alias Token。

3.2 基本主题定制
通过ConfigProvider的theme属性配置主题：
https://zlpow.cn/category/tech-trends.html

import { ConfigProvider } from 'antd';

const App = () => (
  <ConfigProvider
    theme={
  {
      token: {
        colorPrimary: '#1890ff',    // 品牌主色
        borderRadius: 6,             // 圆角大小
        colorBgBase: '#ffffff',      // 基础背景色
        colorTextBase: '#000000',    // 基础文字色
        fontFamily: 'system-ui, sans-serif',
        controlHeight: 32,           // 控件高度
      },
    }}
  >
    <YourApp />
  </ConfigProvider>
);

3.3 使用预设算法
Ant Design提供了三套预设算法，可以快速切换主题风格：

import { ConfigProvider, theme } from 'antd';

const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;

// 暗色主题
<ConfigProvider theme={
  { algorithm: darkAlgorithm }}>
  <App />
</ConfigProvider>

// 紧凑主题
<ConfigProvider theme={
  { algorithm: compactAlgorithm }}>
  <App />
</ConfigProvider>

// 组合算法（暗色+紧凑）
<ConfigProvider theme={
  { algorithm: [darkAlgorithm, compactAlgorithm] }}>
  <App />
</ConfigProvider>

3.4 组件级别定制
除了全局Design Token，还可以针对特定组件进行样式定制：

<ConfigProvider
  theme={
  {
    components: {
      Button: {
        colorPrimary: '#00b96b',
        algorithm: true,  // 开启算法派生
        borderRadius: 4,
        controlHeight: 40,
      },
      Table: {
        headerBg: '#fafafa',
        rowHoverBg: '#f5f5f5',
      },
    },
  }}
>
  <App />
</ConfigProvider>

3.5 动态主题切换
Ant Design 5.0支持运行时动态切换主题，无需任何额外配置：

import { ConfigProvider, Button } from 'antd';
import { useState } from 'react';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <ConfigProvider
      theme={
  {
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: '#1677ff',
        },
      }}
    >
      <Button onClick={() => setIsDark(!isDark)}>
        切换主题
      </Button>
    </ConfigProvider>
  );
};

3.6 局部主题（嵌套主题）
通过嵌套ConfigProvider可以实现局部主题的更换，子主题中未被改变的Design Token将会继承父主题：

<ConfigProvider theme={
  { token: { colorPrimary: 'blue' } }}>
  <Button>蓝色主题按钮</Button>
  <ConfigProvider theme={
  { token: { colorPrimary: 'green' } }}>
    <Button>绿色主题按钮</Button>
  </ConfigProvider>
</ConfigProvider>

3.7 使用useToken获取Design Token
如果你希望在组件中直接使用当前主题的Design Token，可以使用useToken Hook：

import { theme } from 'antd';

const { useToken } = theme;

const MyComponent = () => {
  const { token } = useToken();

  return (
    <div style={
  { backgroundColor: token.colorBgContainer }}>
      <p style={
  { color: token.colorPrimary }}>当前主题主色</p>
      <p>圆角大小: {token.borderRadius}px</p>
    </div>
  );
};

3.8 CSS-in-JS与性能优化
Ant Design 5.0使用CSS-in-JS技术，提供了动态与混合主题的能力。相较于4.x版本的Less变量方案，新方案支持：

支持动态切换主题

支持同时存在多个主题

支持针对某个/某些组件修改主题变量

自6.0.0起，Ant Design提供了zeroRuntime模式来进一步提升应用性能。开启后，Ant Design将不再在运行时生成组件样式，需要自行引入CSS文件：

import 'antd/dist/antd.css';

<ConfigProvider theme={
  { zeroRuntime: true }}>
  <App />
</ConfigProvider>

来源：
https://zlpow.cn/category/hardware-review.html