🎉 Ant Design 6.0 来了！ 🎉

引言

自开源以来，Ant Design 已收获 96.6K Star 、累计 31.9K issue 、20.7K PR 、发布了 904 个 npm 版本 ，并有 2314 位贡献者 共同参与其中。这些数字不仅代表着社区的活跃度与支持，也见证了项目的不断进化与成熟。

正因为你们，Ant Design 才能不断成长，向下一站前行：《Plan about Ant Design 6.0》

经过大量 RFC 讨论以及多个 Alpha 版本的迭代，v6 已进入稳定阶段。今天，我们宣布 Ant Design v6 正式发布！

本次升级以 技术侧深度优化 为重点，旨在为 React 19 以及未来版本提供更好的兼容与性能（版本兼容提升至 React 18），并进一步完善组件的语义化结构和 CSS 变量支持。

与 v5 不同，这次升级是 平滑版本迁移：

如果你的项目已经运行在 v5，无需使用兼容包或 codemod 工具，即可直接升级到 v6。
v5 主分支将切换至 v5.x-stable 进入 1 年维护周期 。
- 除非出现特别严重的 Bug，我们不会再对 v5 进行功能性更新。

技术升级与核心变化

⚛ React 最低版本要求提升至 18

v6 支持版本从 React 18 起，移除了此版本之前的 React 兼容逻辑，避免了不同版本间的 API 行为差异。

我们仍然建议使用最新的 React 19 版本以获得最佳体验。

对于静态方法比如 Modal.confirm，你已经不需要额外的兼容代码或依赖，可直接移除相关兼容代码：

diff 复制代码

-- import '@ant-design/v5-patch-for-react-19';

📦 dist 开启 React Compiler

在打包产物 antd.js 以及 antd.min.js 中启用了 React Compiler 以优化性能，对使用 CJS/ESM 场景的用户可自行选择开启，参考 React 官方文档。

🌈 纯 CSS Variables 样式架构

随着 IE 支持的彻底移除，v6 中的 @ant-design/cssinjs 默认采用 纯 CSS Variables 模式：

样式切换更轻量，支持实时主题变化。
多主题复用降低打包体积。
支持零运行时样式生成，可搭配 @ant-design/static-style-extract：

tsx 复制代码

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

性能对比如下，zeroRuntime 模式表现最佳（水平轴为主题数量）：

你可以通过 useToken 获取完整变量名：

tsx 复制代码

const App = () => {
  const {
    cssVar: { colorBgElevated },
  } = theme.useToken();
};

🚫 不再支持 IE

CSS Variables 模式彻底移除 IE 兼容的 StyleProvider。

🧩 全量组件语义化结构

v6 完成了 所有组件 的 DOM 语义化改造：

#52115

#54995

API 使用逻辑位置描述（如 start / end），支持 RTL。
内部结构可用 ConfigProvider 的 classNames 和 styles 统一配置。
- 支持函数式动态生成语义结构：

tsx 复制代码

const btnClassNames: ButtonProps['classNames'] = ({ props }) => {
  switch (props.type) {
    case 'primary':
      return { ... };
    default:
      return { ... };
  }
};

<ConfigProvider button={{ classNames: btnClassNames }}>
  <App />
</ConfigProvider>

俏皮图标按钮

tsx 复制代码

<Button
  classNames={{
    root: 'rounded-tr-xl rounded-bl-xl',
    icon: 'rotate-30',
  }}
  icon={<SmileOutlined />}
>
  Ant Design
</Button>

极客风卡片

tsx 复制代码

<Card
  title="Hello World"
  classNames={{
    root: "bg-green-300/10 text-green-500 border-green-500 rounded-none [box-shadow:0_0_8px_theme(colors.green.500)]",
    header: "rounded-none border-green-500 [box-shadow:inset_0_0_8px_theme(colors.green.500)]",
    title:
      "text-green-500 [text-shadow:0_0_12px_theme(colors.green.400)] overflow-visible",
      body: "rounded-none [text-shadow:0_0_8px_theme(colors.green.400)] [box-shadow:inset_0_0_12px_theme(colors.green.500)]"
  }}
>
  Ant Design loves you!~ (=^・ω・^)
</Card>