🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 11月27日

🎉 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》

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 模式表現最佳（水平軸為主題數量）：

Size

Speed

你可以通過 useToken 獲取完整變數名：

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

🚫 不再支持 IE

CSS Variables 模式徹底移除 IE 相容的 StyleProvider。

🧩 全量元件語義化結構

v6 完成了 所有元件 的 DOM 語義化改造：

Semantic Structure

52115

Semantic Render Props

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>

Funny

極客風卡片

<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>

Geek Green