🎉 Ant Design 6.0 來了！這次它終於想通了什麼？

🎉 Ant Design 6.0 來了！這一次它終於想通了什麼？

大家好😁。

還記得我之前那篇吐槽《當 Ant Design 成了你最大的技術債》的文章嗎😂？在那篇文章裡，我痛斥了 Antd 的黑盒樣式、難以覆蓋的 !important 地獄，以及臃腫的 CSS-in-JS 運行時性能。

當時有很多朋友在評論區說：國內做 B 端，離不了它。

前天，Ant Design 6.0 正式發布了。帶著審視（甚至是一點點找茬🤔）的心態，我仔細翻閱了 Release Note 和源碼。

看完之後，我沉默了片刻，然後想說一句：
這一次，Ant Design 好像真的聽懂了我們的罵聲。它正在試圖撕掉笨重的標籤，向現代前端開發範式（Tailwind、Headless）發起一次自我更新。

今天，我就以一個老用戶的視角，來聊聊 Antd 6.0 到底改了什麼，以及作為技術組長，我怎麼看這次升級🤷‍♂️。

告別運行時，擁抱 CSS Variables

在 v5 版本，Antd 引入了 CSS-in-JS。雖然它解決了按需加載的問題，但帶來的運行時性能損耗和樣式插入延遲，一直是性能敏感型項目的噩夢😭。

v6 做了一個極其正確的決定：默認採用純 CSS Variables 模式，並且支持零運行時（Zero Runtime）。

這意味著什麼？

性能大翻身：瀏覽器原生支持 CSS 變數，不再需要 JS 去計算和插入樣式。根據官方的對比圖，Zero Runtime 模式下的性能表現是最佳的。這也意味著，我們那臃腫的 JS Bundle 終於可以瘦身了。

主題切換秒變：以前切換暗色模式，可能需要 JS 重新計算一堆 Token。現在？只需要改變根節點的幾個 CSS 變數值，瀏覽器瞬間完成渲染。

擁抱 React 19：這次升級開啟了 React Compiler 支持，並且徹底移除了對 React 16/17 的兼容代碼，輕裝上陣。

這才是 2025 年組件庫該有的樣子。CSS 的事情，就該讓 CSS 去做，JS 別管太寬🤔。

全量組件語義化

這是我最興奮的一點😁。

以前我們想改一個 Modal 的樣式，得去瀏覽器裡扒 ant-modal-content、ant-modal-header 這種類名，然後寫一堆高權重的 CSS 去覆蓋。

v6 完成了所有組件的 DOM 語義化改造。

它引入了 classNames 和 styles 屬性（這就很有 Headless UI 的味道了🤔），允許你精確地把樣式注入到組件的內部結構中。

比如，你想做一個俏皮風格的按鈕，或者一個極客風的卡片，你不再需要寫惡心的 CSS Selector，而是可以直接這樣寫：

<Button
  classNames={{
    root: 'rounded-tr-xl rounded-bl-xl', // 直接寫 Tailwind 類名！
    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>