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

【问题标题】：How to remove lines between cells in MUI Table如何删除 MUI 表中单元格之间的线条
【发布时间】：2019-12-11 00:11:31
【问题描述】：

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

【问题讨论】：

【解决方案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"
    }
  }}
>

现场演示

【讨论】：

【解决方案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 } }}

【讨论】：