鼎鼎大名的 shadcn/ui，新出的 sidebar 组件却报错？

勇哥最近在做一个 AI 对话项目，前端选型用了 shadcn/ui，shadcn/ui 开源且设计精美，粘贴复制到项目中即可使用。最近又新出了 Sidebar 组件，可以快速构建出类似豆包等 AI 平台 AI 对话效果。

开干，一顿操作猛于虎，直接下载官方预设的 block 到应用中：

npx shadcn@latest add sidebar-01

开 dev 模式预览效果，PC 端效果完美，就差对接后端接口了。切换到 moble 模式，点击切换侧边栏，鲜红的 Console Error 映入眼帘：

DialogContent requires a DialogTitle for the component to be accessible for screen reader users.If you want to hide the DialogTitle, you can wrap it with our
VisuallyHidden component. For more information, see https://radix-ui.com/primitives/docs/components/dialog

先说解决办法：

找到 Sidebar 组件源代码：components/ui/sidebar.tsx

找到 Sidebar 定义的 isMobile 判断部分

在 <SheetContent /> 组件中添加 <SheetHeader/>，具体如下：

Copy
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
{/* 此处代码显示省略... */}
>
{/* 添加以下代码 */}
<SheetHeader className="sr-only">
<SheetTitle>Sidebar</SheetTitle>
<SheetDescription></SheetDescription>
</SheetHeader>
{/* 添加代码结束 */}
{children}
</SheetContent>
</Sheet>
)
}

再说产生的原因：

shadcn/ui 的 Sidebar 组件在 mobile 模式下会用到 Sheet 组件

shadcn/ui 的 Sheet 组件依赖 radix-ui 的 dialog 组件

radix-ui 的 dialog 组件要求 DialogContent 必需

套娃了属于是。

文中提到的资源如下：

shadcn/ui 项目官网：https://ui.shadcn.com/

代码仓库：https://github.com/shadcn-ui/ui