🎉 Ant Design 6.0 来了！ 🎉 #55805
Description
English | 中文
引言
自开源以来，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，你已经不需要额外的兼容代码或依赖，可直接移除相关兼容代码：
-- 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：
<ConfigProvider theme={{ zeroRuntime: true }}>
<App />
</ConfigProvider>性能对比如下，zeroRuntime 模式表现最佳（水平轴为主题数量）：
你可以通过 useToken 获取完整变量名：
const App = () => {
const {
cssVar: { colorBgElevated },
} = theme.useToken();
};🚫 不再支持 IE
CSS Variables 模式彻底移除 IE 兼容的 StyleProvider。
🧩 全量组件语义化结构
v6 完成了 所有组件 的 DOM 语义化改造：
- API 使用逻辑位置描述（如
start/end），支持 RTL。 - 内部结构可用 ConfigProvider 的
classNames和styles统一配置。- 支持函数式动态生成语义结构：
const btnClassNames: ButtonProps['classNames'] = ({ props }) => {
switch (props.type) {
case 'primary':
return { ... };
default:
return { ... };
}
};
<ConfigProvider button={{ classNames: btnClassNames }}>
<App />
</ConfigProvider>俏皮图标按钮
<Button
classNames={{
root: 'rounded-tr-xl rounded-bl-xl',
icon: 'rotate-30',
}}
icon={<SmileOutlined />}
>
Ant Design
</Button>
极客风卡片
<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>
🚫 移除 v4 废弃 API
v6 移除了在 v4 废弃、v5 保留兼容的所有 API：
findDOMNode兼容逻辑移除。- List、Dropdown.Button、BackTop 文档移除但保留兼容。
- React 18 兼容代码删除（直接支持 18）。
- 统一 API 命名风格，兼容 v5 所有 API。
新组件与功能增强
🔥 Masonry 瀑布流组件
用于图片展示、卡片流等场景：
🔥 Tooltip 支持平移滑动
在多个提示内容之间开启平移滑动：
🆕 InputNumber spinner 模式
常见的按钮平铺样式，便于用户直接点击交互：
🆕 Drawer 支持拖拽
🎨 蒙版模糊背景
所有弹层默认使用模糊效果，可通过 mask: { blur: false } 关闭：
升级指南
- v6 对 v5 完全兼容，可直接升级。
- 建议按警告替换废弃 API。
- 项目需运行在 React 18 或更高版本。
- 不再支持 IE。
未来计划
- 优化移动端交互体验。
- 增强无障碍（Accessibility）支持。
- 跟进 React 新特性提升性能。
- 更多新组件开发中，敬请期待。
One More Thing
🚀 Ant Design X 同步发布 2.0 版本。作为 Ant Design 面向 AI 场景的组件库，新版本带来了更强大的交互与渲染能力。如果你正在探索 AI 驱动的界面体验，现在就是最佳时机：🎉 Ant Design X 2.0 正式发布了 🎉
写在最后
Ant Design 自第一行代码以来，经历了 10 个年头。我们希望在 AI 浪潮之下，Ant Design 仍然是你的最好伙伴。感谢为 v6 付出的各位朋友。 —— 因为你们的参与，开源才如此美好：
984507092
afc163
aojunhao123
Arktomson
cactuser-Lu
ccc1018
codewizardTM
coding-ice
crazyair
divyeshagrawal
elrrrrrrr
EmilyyyLiu
fireairforce
GinWU05
guoyunhe
hcjlxl
JeeekXY
Jerryqun
jin19980928
jon-cullison
kiner-tang
li-jia-nan
Linkodt
lovelts
MadCcc
meet-student
nmsn
OysterD3
Psiphonc
Susuperli
tanjiahao24
thinkasany
ug-hero
wanpan11
Wxh16144
xkhanhan
yellowryan
yoyo837
zjr222
zombieJ
Zyf665