antd 有哪些问题
1. 样式难以重置
如果你是 antd 的初学者，那么你可能会花大量的时间在重置样式上。
有两个 antd 新手常见的问题：
1.有些样式是通过伪元素来实现的，除非直接覆盖伪元素样式，那么你写的任何覆盖样式都不会生效。
2.Modal , Popover 这种 Portal 组件，默认是挂载在 body 上的。如果你想要覆盖这些组件的样式,要么使用 getPopupContainer 属性让组件挂载在你指定的元素上，要么在组件中传入 style , className 属性，或者干脆直接写全局样式。
除了新手常见的问题，还有组件库都有的问题。比如自带的组件  Icon 不能修改 , 动效添加、修改十分困难等等。

2.出了 bug 难以修改

虽然 antd 社区很活跃，响应速度很快。但是如果你遇到了 bug，那么你只能到 github 上提 issue 或者 pr ，然后等待 antd 维护者的回复或者审核，等待新版本的发布。这个过程可能会花费你很多时间，而且最终你的 pr 也不一定会被合并，因为 antd 维护者可能会觉得你的 pr 不符合他们的设计理念。

3. 历史包袱太重
这也是 antd 这一类组件库的通病。大家都知道，react 的生态圈是非常活跃的，随着时间的流逝，社区会出现一些非常优秀的组件，比如

react-hooks-form
@tanstack/react-table
framer-motion
embla-carousel
zod

但是 antd 的维护者不会考虑到这些组件，因为他们的组件库已经有了类似的组件，比如 Form , Table , Carousel 等等。这些组件的核心逻辑可能都是好几年前就已经固定了。作为国内最大的 react 组件库，antd 的维护者不可能随意修改这些组件核心逻辑，这就是一个沉重的历史包袱。

那我们应该选择什么组件库呢？回答这个问题之前，我们先来看看上面社区优秀的组件都有一个共同特点：Headless UI
Headless UI 是一种无样式的可访问组件，它们的唯一职责是管理组件的状态变化，而不关心任何视觉方面的问题。
想必大家都已经熟知 Headless UI 了，这里就不多说了。社区也有很多优秀的 Headless UI 组件库, 比如
radix-ui
chakra-ui
headless ui
那么为什么我最终选择基于 radix-ui 的 shadcn/ui 呢？

1. shadcn/ui 并不是一个组件库
shadcn/ui 并不是一个组件库，它不能直接在 npm 下载，作者现在也暂时没有计划发布一个 npm包。它只是一个 react 组件的集合。这些组件大多数都是基于 radix-ui 的 primitive 组件封装的。一些比较复杂的组件，比如Table , Form ( 在今天刚刚推出 ) 等等都是采用社区优秀的组件 react-hooks-form，zod , @tanstack/react-table 来实现的。

使用 shadcn/ui 时 , 你可以直接复制组件的源码到你的项目中，或者采用官网的 cli 工具

npx shadcn-ui add [component]

比如

npx shadcn-ui add alert-dialog

官方是基于 next.js, tailwindcss 的模版，但是这个仓库并不是一个 npm 包。这意味着你可以尽情选择自己喜欢的脚手架，构建工具或者 css 写法，比如 vite ,webpack ,create-react-app , sass , less styled-compoents 等等。这么做的好处是，你可以完全控制组件的样式，完全控制组件的逻辑，你可以随意修改组件的任何东西。

2. 有一个统一的样式规范
shadcn/ui 的组件都是 Headless UI，但是对于一个小公司或者个人来说，维护一个组件库的样式规范是很困难的，这是 Headless UI 的一个最大的缺点。你可能只想向 antd 那样开箱即用，所以 shadcn/ui 为你提供了一个统一的样式规范，大体是极简风格，你可以直接使用它，也可以随意修改它。

总结
shadcn/ui 的出现完美解决了我上面提到的 antd 这类组件库的问题。除此以外他还有打包体积小，轻量化的特点，得到了开源社区很多大佬的广泛认可，希望各位有机会都可以在项目中试用一下。