如何去除Mantine表格的默认线条？

Mantine表格的默认线条大概率是通过伪元素或box-shadow实现的，以下是几种可行的解决方案：

方法1：覆盖Mantine内置类样式 #

Mantine表格的行、单元格有专属类名，可直接通过CSS覆盖：

/* 移除行之间的分隔线 */
.mantine-Table-tr {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 移除单元格的侧边线条 */
.mantine-Table-td, .mantine-Table-th {
  border-right: none !important;
  box-shadow: none !important;
}

若仍无效，打开浏览器开发者工具（F12）选中线条元素，检查是否有:before/:after伪元素，直接禁用：

.mantine-Table-tr::after, .mantine-Table-tr::before {
  display: none !important;
}

方法2：利用组件props配置 #

Mantine表格组件自带控制样式的props，直接配置即可：

<Table 
  withBorder={false}  // 移除表格整体边框
  striped={false}     // 取消斑马纹线条
  highlightOnHover={false}  // 移除 hover 高亮线条
>
  {/* 表格内容 */}
</Table>

方法3：全局样式强制清除 #

如果前两种方法都不生效，可通过全局CSS强制清除所有相关样式：

.mantine-Table {
  border-collapse: collapse;
}
.mantine-Table * {
  border: none !important;
  box-shadow: none !important;
}
.mantine-Table *::before, .mantine-Table *::after {
  display: none !important;
}

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