- Ant Design GitHub 倉庫地址：
- Ant Design 官網：
引言
在 9 月底，我們發佈瞭 v5 alpha 版本。經過 2 個月的調整，API 已經逐漸穩定。感謝社區同學所提供的寶貴建議與代碼貢獻，正是社區的力量使得 Ant Design 在短時間內完成瞭大量的改造工作。這裡我們會對 v5 的一些重大更新進行說明，當然你也可以直接到 更新日志 頁面查看完整的更新內容。
需要註意的是，同上一個大版本發佈一樣。我們將會將 v4 從主分支切換至 4.x-stable 分支進入維護狀態。v4 將會繼續維護 1 年時間，仍然會對 Bug 發佈 Patch，但是此後不再接收新的 Feature Request。截止日期為 2023 年年底。原 v4 官網遷移至 https://4x.ant.design/。
設計升級
設計方面，我們根據自身業務實踐和社區呼聲，增加瞭 4 類新組件和 4+ 變體組件， 這些組件都經過嚴謹的推敲，確保瞭其通用性和擴展性，希望它們為你帶來良好的使用體驗。同時，我們將內部使用很久的一些重型資產開放出來，幫助大傢服務更多的業務場景。
另外在默認樣式方面，我們對組件進行全面升級。秉持快樂工作的內核，我們從「更聚焦」、「去幹擾」、「輕松感」三個方向對系統視覺進行瞭升級。其中涉及到主色、圓角、文字色階、交互反饋等多個全局樣式的優化和調整，另外我們還對導航框架和幾乎所有組件做瞭去線化處理。這些改變，除瞭能帶給你煥然一新的感覺，在具體使用過程中，也更加易用。當然，如果你對樣式主題有不一樣的審美和訴求，在 5.0 當中，你可以輕易根據我們提供的樣式算法和配置工具，一鍵定制屬於你自己的主題。
最後，我們始終以人為本，正在試驗名叫「快樂工作」的主題包，內含情感增強特色組件，用戶在特定場景使用時，會有豐富但克制的動畫，為用戶帶來一點“快樂感”。我們希望這是一個開始，呼籲行業設計多關註企業級產品，為冰冷的企業級產品註入更多的情感去關懷我們的用戶。快樂工作主題包將在發佈會後推出，敬請期待～
全新 Design Token 模型
在 v4 版本中，我們提出更多的 less 變量以支持主題定制能力。然而除瞭色板支持完全的派生能力外，其他如字體、行高、間距都沒有對應的算法。在 v5 中，我們改造瞭所有的 Token，使其基於 Seed + Algorithm 可以派生出所有的 Design Token。全新的 Design Token 模型支持多算法 Pipeline，從而大大降低開發者拓展成本。你可以選擇一個現成的算法，再加自己的拓展部分算法（當然你也可以寫一套完整的算法），就可以生成一套完整的 Design Token：
CSS-in-JS 動態主題
過去我們嘗試通過 CSS Variables 提供動態主題能力。在經過一段時間的探索後，我們發現隨著設計系統的復雜度提升，其中間變量的維護成本就會變得不可忽略。因而在 v4 時期，CSS Variables 停留在瞭動態主題色而沒有進一步提供暗色、其他 Token 的動態能力。到瞭 v5，隨著靈活性的需求呼之欲出，我們不得不再次面對動態主題的問題。
在 v5 啟動伊始，我們花瞭幾個月的時間對比當下流行的動態主題方案：CSS Variables 與 CSS-in-JS。CSS-in-JS 不需要維護中間變量，但是有更多的運行時消耗（如果你對此不太熟悉，歡迎閱讀 Why We're Breaking Up with CSS-in-JS）。從維護成本而言，我們更傾向於後者，但是我們並不希望因此而損害用戶體驗。因而在經過一系列嘗試後，我們研發瞭一套針對組件級別的 CSS-in-JS 庫 @ant-design/cssinjs。它通過犧牲動態性來獲取更高的緩存效率，從而減少運行時的性能損耗。
通過動態主題能力，你通過 ConfigProvider 可以任意調整、嵌套主題：
<ConfigProvider theme={{ token: { colorPrimary: 'red' }}}>
<ConfigProvider theme={{ token: { colorPrimary: 'blue' }}}>
<MyApp />
</ConfigProvider>
</ConfigProvider>