勇哥

勇哥开发之路

I build things on web.

鼎鼎大名的 shadcn/ui,新出的 sidebar 组件却报错?

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

shadcn-0

开干,一顿操作猛于虎,直接下载官方预设的 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

先说解决办法:

  1. 找到 Sidebar 组件源代码:components/ui/sidebar.tsx
  2. 找到 Sidebar 定义的 isMobile 判断部分

<SheetContent /> 组件中添加 <SheetHeader/>,具体如下:

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

再说产生的原因:

  • shadcn/ui 的 Sidebar 组件在 mobile 模式下会用到 Sheet 组件
  • shadcn/ui 的 Sheet 组件依赖 radix-ui 的 dialog 组件
  • radix-ui 的 dialog 组件要求 DialogContent 必需

套娃了属于是。

文中提到的资源如下:

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.