主页 / coding / 问题 / 79481073
Accepted
Dreamer64
Asked: 2025-03-03 21:20:38 +0800 CST

当应用 isHeaderSticky 属性时，如何自定义 HeroUI 表头？

  • 772

使用 (Vite + ReactJS + Tailwind CSS v3 + HeroUI)

如果我们在 HeroUI Table 上应用isHeaderStickyprop，它会添加另一种样式，比如某种阴影、轮廓或边框，我们该如何删除它呢？

在此处输入图片描述

生成上述图片的代码是：

  <Table
    removeWrapper
    isHeaderSticky                    
    classNames={{ 
      th: ["!rounded-none", "!shadow-none", "!border-none"],          
    }}
    >
    <TableHeader>
      <TableColumn key="name">NAME</TableColumn>
      <TableColumn key="role">ROLE</TableColumn>
      <TableColumn key="status">STATUS</TableColumn>
    </TableHeader>
    <TableBody items={items} emptyContent={"No permits found"}>              
    </TableBody>
  </Table>

我尝试添加这个：

classNames={{
  th: ["!border-none", "!rounded-none", "!shadow-none"],
}}

但它不起作用，所以请问有什么想法吗？

reactjs

1 个回答

  1. Best Answer

    我查看了HeroUI 文档中的示例，isHeaderSticky这是一个可行的复制品。这让我看到了 HeroUI 如何设计thead。

    <thead class="[&amp;>tr]:first:rounded-lg sticky top-0 z-20 [&amp;>tr]:first:shadow-small" role="rowgroup">
  <tr role="row" class="group/tr outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2">
    ...
  </tr>
</thead>

    因此，中的第一个 tr 子元素thead接收该类shadow-small。第一个tr本身没有获得，仅在焦点模式下。因此，我只需从元素中outline删除即可。shadowthead

    让我们看看如何在 中实现类thead。<Table>正如您在问题中提到的那样，该组件具有一个属性，该属性接受带有classNames键的数组。theadth

    classNames: Partial<Record<'base' | 'table' | 'thead' | 'tbody' | 'tfoot' | 'emptyWrapper' | 'loadingWrapper' | 'wrapper' | 'tr' | 'th' | 'td' | 'sortIcon', string>>

// prettier format
classNames: {
  base: "...",
  table: "...",
  thead: "...",
  // etc.
}

    让我们传递它：

    <Table
  removeWrapper
  isHeaderSticky                    
  classNames={{
    thead: "[&>tr]:first:shadow-none", // or can use [&>tr]:first:!shadow-none    
  }}
>
  ...
</Table>

    结果

    传递shadow-none给tr可以工作，但对于th（正如您在问题中提到的），它绝对不适合，因为阴影应用于thead > tr:first。

    最准确的解决方案是告诉thead它里面的第一个 tr 不应该接收阴影。

    classNames={{
  thead: "[&>tr]:first:shadow-none", // this will be true only to thead > tr:first
}}

    或者，应用于first:shadow-none可能tr会有效，但这不仅会从 中去除阴影thead > tr:first，还会从例如 中去除阴影tbody > tr:first。

    classNames={{
  tr: "first:shadow-none", // this will be true to thead > tr:first, but also will be true to tbody > tr:first
}}
    • 0

相关问题