Ant Design 6.0 正式发布
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 的场景可自选启用。
🌈 纯 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 语义化改造：
- Ant Design v6 tasks[#52115](javascript:;) (https://github.com/ant-design/ant-design/issues/52115)
-
Support better customization with semantic classNames/styles[#54995](javascript:;) (https://github.com/ant-design/ant-design/issues/54995)
-
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。
详情查看：https://mp.weixin.qq.com/s/PDnuGY02-kJ4We27HvN4KQ
下载地址：https://github.com/ant-design/ant-design/releases/tag/6.0.0
