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

Question

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

原文由 pizzae 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 Soothran 在评论中提到的，这由 TableCell 的底部边框控制。下面是自定义它的一种方法。

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

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

原文由 Ryan Cogswell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

现场演示

原文由 NearHuscarl 发布，翻译遵循 CC BY-SA 4.0 许可协议