之前的博客中介绍过shadcn,我也有一个开源项目X.Ryder是用这个做的。shadcn是一个新兴的项目,还在不断迭代中,所以在使用过程中,不免会遇到一些问题,而因为它的持续更新,大模型有时候也没法帮助我们解决遇到的bug。
因为近期开发的项目中已经遇到2个关于shadcn的bug,现记录一下排除bug的心路历程。
问题来源
这2个问题都跟使用Dialog有关,第一个问题是因为升级了Dialog组件导致,当打开并关闭Dialog之后,页面无法点击。这个问题通过回退版本解决的。
今天遇到的问题如下图所示:
当在Dialog中通过PopOver组件打开一个带有滚动条的内容时,鼠标滚轮无法使用的问题。
使用github 的issues
不管是使用ChatGPT还是DeepSeek,都没能解决问题。最后我去Github 的 shadcn/ui的主页,在issues里进行搜索关键词:Dialog + scroll,发现有用户提了相同的问题。 根据这个issues中对解决方案的描述,我修改了PopoverContent的源码,问题得以解决。
在确定是Dialog引起的问题时,我首先尝试将Dialog内部的内容直接展示在页面上,这时候是没有出现鼠标滚轮无法使用的情况的。
虽然在使用shadcn的过程中会遇到很多bug,但好在我们可以直接修改shadcn的源码,问题都会得到解决。另外在使用它的过程中,我也体会到从Github 的issues 中寻找解决问题的思路是一种比较高效的方式。