当你的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的帮助下，把它拼成了我们设计师想要的、独一无二的弹窗。
  

我们拿回了CSS的完全控制权，同时又享受了 AI + 组件开发的便利。

我依然尊敬Ant Design，它在前端B端历史上，是个丰碑。
对于那些从0到1的、对UI没有要求的内部系统，我可能依然会用它。

但对于那些需要品牌、体验、个性化的核心产品，我必须和它说再见了。

因为，当你的组件库开始控制你的设计和性能时，它就不是你的资产了。

而变成你最大的技术债🙌。