Ant Design

• ant-design/ant-designGitHubant-design/ant-designant-design/ant-design · 丰富强大的组件库 · 不建议产品使用 - 除非是后台管理系统 · 参考 · 推荐使用 react-component，antd 的基础库 · 非常适用于 快速 出原型和结果 · 非常适用于 内部系统 / 后台管理系统笔记：Ant Design
  • 丰富强大的组件库
  • 不建议产品使用 - 除非是后台管理系统
• 参考
  • 推荐使用 react-component笔记react-componenthttps://github.com/react-component · 参考 · https://react-component.github.io/badgeboard/ · react-component/tree · npm:rc-tree打开：/notes/web/react/component，antd 的基础库

npm add antd

Packagesantdnpm PackageantdNPM

Ecosystem

• Pro Components (@ant-design/pro-components)
  • 高级组件，进一步封装
  • ProForm, ProTable, ProLayout
• Mobile (ant-design-mobile)
  • v5 是一次重写，质量有很大提升

Versions

Ant Design v6

2025-11 发布，全面拥抱现代 Web 标准。

• Core Changes
  • React 18+ Only: 放弃旧版本 React 支持，兼容 React 19。
  • Pure CSS Variables: 默认采用纯 CSS 变量架构，不再依赖 Hash 类名生成样式，实现 0运行时样式生成。
    • 移除 IE 支持。
    • Lighter bundle size.
  • Performance: 启用 React Compiler 优化构建。
• New Features
  • New Components: Masonry (瀑布流), Splitter (面板分割).
  • ConfigProvider: 增强全局配置能力 (Table rowKey, Tooltip arrows, etc.).
  • Styles: 更好的暗黑模式和主题切换体验 (Zero-runtime).
• Migration
  • 如果已经在使用 v5，升级较为平滑。
  • 需要确保 @ant-design/icons >= 6.0.0.

Ant Design v5

2022-11 发布，架构大升级：CSS-in-JS。

• Architecture
  • CSS-in-JS: 也就是 ant-design/cssinjsGitHubant-design/cssinjs。
    • 不再支持 LESS。
    • 动态主题能力大幅增强 (Design Tokens)。
    • 按需加载样式，无需 babel-plugin-import。
  • Day.js: 替换 Moment.js 为默认日期库 (更轻量)。
• Components
  • New: Watermark (水印), Tour (漫游引导), QRCode, FloatButton, App (包裹组件用于提供 Context).
  • Data Driven: 更多组件支持数据驱动属性 (items prop)，如 Menu, Steps 等，不再单纯依赖 JSX children。
• Migration
  • v4 to v5 Migration Guide
  • 接口同一化 (open/visible -> open, className -> popupClassName 等).

Ant Design Mobile v5

• 重写版本，体验更好。
• 使用 use-gesture 处理手势。
• 使用 react-spring 处理动画。
• 使用 CSS Variables。

Ant Design v4 (Legacy)

2020-03 发布，重写 Form，图标按需加载。

• Major Changes
  • Form: 重写，不再需要 Form.create() 高阶组件，基于 Hooks。
  • Icons: 从字体图标改为 SVG 组件，不再全量引入。
• Legacy Snippets

Installation (v4):

# Basic
yarn add antd @ant-design/icons

# Load Less (Legacy)
yarn add --dev babel-plugin-import

Packagesantdnpm PackageantdNPM@ant-design/iconsnpm Package@ant-design/iconsNPMbabel-plugin-importnpm Packagebabel-plugin-importNPM

Babel Config (v4):

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // `style: true` 会加载 less 文件
      }
    ]
  ]
}

Style Import (v4):

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

References:

• Migration v4
• Form v3 Documentation (Legacy)
• Simple way of modifying Ant Design default theme