大家好😁
如果你是一个前端，尤其是在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
/* 一个高权重的全局CSS文件 */
.ant-modal-header {
/* ... */
}
/* 嘿，那个右上角的关闭按钮，给我藏起来！ */
.ant-modal-close-x {
display: none !important;
}为了把那个 X 藏起来，我们用了!important。我们亲手打开了潘多拉魔盒。
这个表格的筛选图标，能换成我们自己画的吗？😖
antd的Table，是一个重灾区。它太强大了，也很黑盒。
我们设计师，重新画了一套筛选、排序的图标。但我们发现，antd的Table组件，根本没想过让你换这个。
我们唯一的办法，就是用 CSS选择器 ，一层一层地穿进antd的DOM结构里，找到那个<span>，然后用background-image去盖掉它。
css
/* 另一个人写的，更恶臭的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没有要求的内部系统，我可能依然会用它。
但对于那些需要品牌、体验、个性化的核心产品，我必须和它说再见了。
因为，当你的组件库开始控制你的设计和性能时，它就不是你的资产了。
而变成你最大的技术债🙌。