一、自研的优缺点
优点：
- 代码控制力强，可以结合不同组件库的特性。
- 可以使用社区最新的生态组件，没有历史遗留负担。
缺点：
- 开发成本高
- 维护成本高
二、组件库的概念区分
从上图可以很清晰的看出，我们所构建的 UI 分为 3 个部分。
- CSS ++
- Behavior Libraries
- Style System
我们所熟知的 antd 就是由他的行为库 react-component 加上设计规范 Antd Design 构成。在我们使用 antd 来构建 UI 的时候，通常我们会加上自己的样式扩展，三者交汇在一起，构成了我们的 UI 。
这在纯应对业务上没有什么问题，可以说算是比较不错的选择。但是很多时候我们不仅仅需要满足功能上的需求，更重要的是我们需要足够的个性化以及差异化。
三、技术选型
（1）Behavior Libaries 选择 shadcn/ui
www.libhunt.com/compare-ui-...
headlessui的组件数量比较有限，像Form、Button都没有。
shadcn/ui文档更加完善一些，包括主题、深浅色如何配置，更加细致，不过2023年才出。通过copy形式进行代码二次编写
（2）Css++使用的tailwindcss
四、理解antd、arco、semi等组件库的机制思路。
"在 Design Token 中我们提供了一套更加贴合设计的三层结构，将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组，而是一个三层的派生关系，由 Seed Token 派生 Map Token，再由 Map Token 派生 Alias Token。在大部分情况下，使用 Seed Token 就可以满足定制主题的需要。但如果您需要更高程度的主题定制，您需要了解 antd 中 Design Token 的生命周期。"
antd4 的less变量对应着 antd5的component token。ant.design/docs/react/...
antd作为开源库，有了这种seed token就可以轻易定制主题，十分方便。
公司内部建设组件库，不建议使用这种阶梯型的token机制，因为没有应用场景，而且会增加token之间的算法、如何映射维护的复杂度；以及token命名会变得复杂。
另外arco.design/react/docs/... antd的map token：ant.design/theme-edito... token的阶梯概念。
五、公司组件库怎么去支持主题定制的需求？？
（一）全局：参照antd map token 和arco设置全局的 token变量值。
(二）组件内：根据token使用css变量，
可以考虑使用tailwindcss 实现样式ui.shadcn.com/docs/themin...
六、暗黑模式和浅色模式
（一）antd方法
通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是默认算法 theme.defaultAlgorithm、暗色算法 theme.darkAlgorithm 和紧凑算法 theme.compactAlgorithm。你可以通过修改 ConfigProvider 中 theme 属性的 algorithm 属性来切换算法。
你的页面的整体风格，需要利用一些 CSS 变量 调整为暗色。
(二）arco参照: arco.design/react/docs/...
通过设置 arco-theme 为 dark，只是将组件库切换成了暗色模式，你的页面的整体风格，需要利用一些 CSS 变量 调整为暗色。具体可查看变量
七、组件库的默认参数值
(1) arco实现了更改组件默认配置功能；antd没有该功能。
（2）antd有修改组件的classnames和style的功能（5.7.0）
八、组件库和D2C
(一）antd官方维护的是sketch组件包；有非官方维护的figma。
（二）semi对figma的支持更好？semi.design/zh-CN/start...
（1）主题定制后，可以通过C2D生成UIKIT, 避免UI手工大量工作去生成UIKIT；这部分工作也是UI不愿意去维护的。
目前antd无法做到这一点。
（2）semi同时支持D2C的功能。这点antd也没有去实现。