如何移除HeroUI Table开启isHeaderSticky后添加的额外样式？

技术栈 #

Vite + ReactJS + Tailwind CSS v3 + HeroUI

问题描述 #

给HeroUI Table组件添加isHeaderSticky属性后，表头自动生成了阴影、边框这类额外样式，想要移除这些样式，但通过classNames给th设置优先级类（!border-none、!rounded-none、!shadow-none）并未生效。

原代码：

<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>

解决办法 #

1. 针对表头容器（thead）设置样式 #

HeroUI开启isHeaderSticky后，阴影和边框样式其实是加在表头的容器（<thead>元素）上，而非单个<th>，所以需要同时配置thead的classNames：

<Table
  removeWrapper
  isHeaderSticky                    
  classNames={{ 
    th: ["!border-none", "!rounded-none"],
    thead: ["!shadow-none", "!border-none"]
  }}
>
  {/* 其他内容不变 */}
</Table>

2. 自定义工具类覆盖样式 #

如果上述方法不生效，可以通过Tailwind的@layer自定义工具类，强制覆盖HeroUI的默认样式：
在项目的全局CSS文件（比如src/index.css）中添加：

@layer utilities {
  .hero-sticky-header-reset {
    @apply !shadow-none !border-none;
  }
}

然后给TableHeader组件添加这个类：

<TableHeader className="hero-sticky-header-reset">
  <TableColumn key="name">NAME</TableColumn>
  <TableColumn key="role">ROLE</TableColumn>
  <TableColumn key="status">STATUS</TableColumn>
</TableHeader>

3. 高优先级选择器全局覆盖 #

如果HeroUI的样式用了!important，可以通过父类结合的高优先级选择器来覆盖：
在全局CSS文件中添加：

.table-sticky-reset thead {
  @apply !shadow-none !border-none !bg-transparent;
}
.table-sticky-reset th {
  @apply !border-none !rounded-none;
}

然后给Table组件添加对应的className：

<Table
  removeWrapper
  isHeaderSticky
  className="table-sticky-reset"
>
  {/* 其他内容不变 */}
</Table>

内容的提问来源于stack exchange，提问作者Dreamer64