出处：掘金
原作者：ErpanOmer
如果你是一个前端，尤其是在 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 覆盖，在新版里，全失效了
我们本想找一个可靠的组件库，这么久过来，结果它成了债主
我们真正需要的可能是轮子
我终于想明白了
Antd，它不是一个组件库（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 没有要求的内部系统，我可能依然会用它
但对于那些需要品牌、体验、个性化的核心产品，我必须和它说再见了
因为，当你的组件库开始控制你的设计和性能时，它就不是你的资产了。而变成你最大的技术债