如何让Shadcn/UI ScrollArea全宽并在内容溢出时添加滚动条？

Question

我正在使用 shadcn/ui 开发一个 Nextjs 项目，其中有一个 ScrollArea 组件，该组件应该占据其容器的整个宽度，并在内容溢出时添加水平滚动条。在这个 ScrollArea 中，我有一个 Table 组件，它溢出了其容器，而不是导致 ScrollArea 滚动。

<div className=" w-full">
  {/* FIXME Fix horizontal scroll  */}
  <ScrollArea className=" w-full overflow-x-auto ">
    <div className="w-full whitespace-nowrap">
      <Table className="relative min-w-full">
        {/* ... rest of the table code ... */}
      </Table>
    </div>
  </ScrollArea>
</div>

这是我导入它的地方

<div className="mx-auto max-w-6xl">
      <div className="flex flex-row items-center justify-between px-2 py-5 md:px-4 md:py-10">
        <h1 className=" text-2xl font-semibold">Tasks</h1>
        <AddTaskButton id={params.id} />
      </div>
      <TasksTable data={transformedData!} columns={columns} />
    </div>

我在layout.tsx中也有一个ScrollArea

 <section className=" flex h-full flex-row overflow-clip">
      <Sidebar id={params.id} />
      <ScrollArea className=" h-full w-full p-4">{children}</ScrollArea>
    </section>

我设置了空白：nowrap；放在表格上以防止文本换行到下一行。 尽管如此，表格仍然溢出了 ScrollArea，而不是导致它滚动。

Answer 1

您需要更新您的第一个代码块，如下所示：

<div className=" w-full">
  {/* FIXME Fix horizontal scroll  */}
  <ScrollArea className=" w-full overflow-x-auto ">
    <div className="w-full whitespace-nowrap">
      <Table className="relative min-w-full">
        {/* ... rest of the table code ... */}
      </Table>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</div>

变化：

• 添加了第二个

  Scrollbar

  和

  orientation

  道具以启用水平滚动。

您可以了解更多这里