🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

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

🚀

專案建置

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

👉 瞭解詳情 / 免費諮詢

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

當你的Ant-Design成了你最大的技術債

大家好😁

如果你是一個前端，尤其是在B端（中后台）領域，Ant Design（antd）這個名字，你不可能沒聽過。

在過去的5年裡，我們團隊的所有新項目，技術選型裡的第一行，永遠是antd。它專業、開箱即用、文檔齊全，擁有一切你想要的組件，幫我們這些小團隊，一夜之間就擁有了大廠的專業門面。

我們靠它，快速地交付了一個又一個項目。

但是，從去年開始，我發現，這個曾經的經典，正在變成我們團隊脖子上最重的枷鎖。

Ant Design，這個我們當初用來解決技術債的核心組件庫，現在，卻成了我們最大的技術債本身😖。

這是一篇團隊血淚史，講一講感想🤷‍♂️。

我們為什麼會愛上 AntD？

我們必須承認，從無到有階段，antd是無敵的。

你一個3人的小團隊，用上antd，做出來的東西，看起來和阿里幾百人團隊做的系統，沒什麼區別。

Table、Form、Modal、Menu... 你需要的一切，它都以一種極其標準的方式給你了。你不再需要自己造輪子。

當你發現@ant-design/pro-components時，一個ProTable，直接幫你搞定了請求、分頁、查詢表單、工具欄... 你甚至都不用寫useState了。

在那個階段，我們以為我們找到了大結局。

當個性化成為我們的 KPI

美好可能是短暫的，從我們的產品經理和UI設計師開始👇：

能不能...不要長得這麼 Ant Design？🤣

這是我們設計師，在評審會上，小心翼翼提出來的第一句話。

老闆也說：我們要做自己的品牌，現在的系統，太千篇一律了!!!

於是，我們接到了第一個簡單的需求：把全局的主題色，從橙色改成我們的品牌紅。

這很簡單，不就是 ConfigProvider嘛🤔。我們改了。

然後，第二個需求來了：這個Modal彈窗的關閉按鈕，能不能不要放在右上角？我們要放在左下角，和確認按鈕放在一起。(有點反人類🤷‍♂️)

災難，就從這裡開始了。

antd的Modal組件，根本就沒提供這個插槽或prop。我們唯一的辦法，是強改。

於是，我們的代碼裡，開始出現這種惡臭的CSS：

/* 一個高權重的全局CSS文件 */
.ant-modal-header {
  /* ... */
}

/* 嘿，對不起，右上角的關閉按鈕，給我藏起來！ */
.ant-modal-close-x {
  display: none !important; 
}

為了把那個 X 藏起來，我們用了!important。我們親手打開了潘多拉魔盒。

這個表格的篩選圖標，能換成我們自己畫的嗎？😖

antd的Table，是一個重災區。它太強大了，也很黑盒。

我們設計師，重新畫了一套篩選、排序的圖標。但我們發現，antd的Table組件，根本沒想過讓你換這個。

我們唯一的辦法，就是用 CSS選擇器，一層一層地穿進antd的DOM結構裡，找到那個<span>，然後用background-image去蓋掉它。

/* 另一個人寫的，更惡臭的CSS */
.ant-table-thead > tr > th.ant-table-column-has-filters .ant-table-filter-trigger {
  /* 媽呀，這是啥？ */
  background: url('our-own-icon.svg') !important;
}

.ant-table-thead > tr > th.ant-table-column-has-filters .ant-table-filter-trigger > svg {
  /* 藏起來，藏起來！ */
  display: none !important;
}

我們被拖累了。

我們花在 覆蓋antd默認樣式上的時間，已經遠遠超過了我們自己寫一個組件的時間。

壓死駱駝的最後一根稻草

我們用了ProTable，它的查詢表單和表格是強耦合的。當產品經理提出一個我希望查詢表單，在頁面滾動時，吸附在頂部的需求時... 我們發現，我們改不動。我們被ProComponents的黑盒，鎖死了。

然後我們的vendor.js打包出來，2.5MB。用webpack-bundle-analyzer一看，antd和@ant-design/icons，佔了1.2MB。我們為了一個Button和Icon，引入了一個全家桶。antd的按需加載？別鬧了，在ProComponents面前，它幾乎是全量的。

而且 antd從v3到v4，我們花了一個月。從v4到v5，我們花了半個月。每一次升級，都是一次大型重構，因為我們那些寫法一樣被CSS覆蓋，在新版裡，全失效了🤷‍♂️。

我們本想找一個可靠的組件庫，這麼久過來，結果它成了債主。

我們真正需要的可能是輪子

我終於想明白了。

Ant Design，它不是一個組件庫（Library），它是一個UI框架（Framework）。它是一套解決方案，它有它自己強勢的 設計價值觀。

當你的需求，和它的價值觀一致時，它就是聖經。
當你的需求，和它的價值觀不一致時，它就變成枷鎖。

我們當初要的，其實是個有樣式的Button；而antd給我的，是一個內置了loading、disabled、onClick時會有水波紋動畫、並且必須是藍色或白色的Button。

我們的自救之路

在我們新的項目中，我忍痛做出了一個決定🤷‍♂️：

原則上，不再使用antd。

我們新的技術棧，轉向了：
Tailwind CSS + Headless UI 方案（比如Radix UI）

這個組合，才是我們想要的：

Headless UI：它只提供功能和無障礙。比如，一個Dialog（模態框），它幫我搞定了按Esc關閉、焦點管理。但它沒有任何樣式。
Tailwind CSS：我拿到了這個無樣式的Dialog，然後用Tailwind的class，在5分鐘內，在AI的幫助下，把它拼成了我們設計師想要的、獨一無二的彈窗。