Ant Design v6 正式发布！
![]()
本次升级以 技术侧深度优化 为重点，旨在为 React 19 以及未来版本提供更好的兼容与性能（版本兼容提升至 React 18），并进一步完善组件的语义化结构和 CSS 变量支持。
与 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 模式：
<ConfigProvider theme={{ zeroRuntime: true }}>
<App />
</ConfigProvider>
性能对比如下，zeroRuntime 模式表现最佳（水平轴为主题数量）：
![]()
![]()
你可以通过 useToken 获取完整变量名：
const App = () => {
const {
cssVar: { colorBgElevated },
} = theme.useToken();
};
🚫 不再支持 IE
CSS Variables 模式彻底移除 IE 兼容的 StyleProvider。
🧩 全量组件语义化结构
v6 完成了 所有组件的 DOM 语义化改造：
![]()
![]()
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
