如何删除 MUI 表中单元格之间的线条

Posted 2023-02-22

【中文标题】如何删除 MUI 表中单元格之间的线条

【英文标题】：How to remove lines between cells in MUI Table

【发布时间】：2019-12-11 00:11:31

【问题描述】：

我尝试编辑各种 CSS 和 Table 和 TableCells 的元素，但我仍然无法让这些线条消失。如何让 MUI 中 Table 元素中的行之间的行消失？

【问题讨论】：

请出示相关代码。我们无法猜测问题出在哪里......请帮助我们为您提供帮助。

试试.MuiTableCell-rootborder-bottom: none

【参考方案1】：

正如 Soothran 在 cmets 中提到的，这是由 TableCell 的底部边框控制的。以下是一种自定义方式。

import MuiTableCell from "@material-ui/core/TableCell";

const TableCell = withStyles(
  root: 
    borderBottom: "none"
  
)(MuiTableCell);

【参考方案2】：

如果您使用的是 MUI v5，则可以使用 sx 属性。新的 MUI 版本还添加了 tableCellClasses 对象，以帮助您以类型安全的方式引用组件 CSS className，而不是使用硬编码字符串 "MuiTableCell-root"：

import Table from "@mui/material/Table";
import TableCell,  tableCellClasses  from "@mui/material/TableCell";

<Table
  sx=
    [`& .$tableCellClasses.root`]: 
      borderBottom: "none"
    
  
>

现场演示

【讨论】：

在哪里可以找到有关 tableCellClasses 的更多信息？

@SomeoneSpecial 每个 MUI 组件都有一个 [component]Classes 常量。简单提到了here。

这条信息比答案本身更有价值?

【参考方案3】：

要删除特定表格单元格的边框线，请使用：

<TableCell style=borderBottom:"none"></TableCell>

【参考方案4】：

classes= root: classes.MuiTableCell 类的 Tablecell，则 多表单元格： 边框底部：“无”

这可以很好地删除表格单元格的 BorderBottom 行。

【参考方案5】：

删除表格边框线：

.MuiDataGrid-root .MuiDataGrid-cell border-bottom: none !important;

【参考方案6】：

要从特定的 TableRow 中删除边框，您可以使用：

sx= "& td":  border: 0