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
