如何在Material-ui中删除表格中单元格之间的线条

Question

我尝试编辑各种 css 和元素，但仍然无法让线条消失。如何使 Material-UI 中 Table 元素的行之间的线条消失？https://material-ui.com/components/tables/#tables

Answer 1

如果您使用的是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"
    }
  }}
>

现场演示

@SomeoneSpecial 每个 MUI 组件都有一个 `[component]Classes` const。[此处](https://mui.com/guides/migration-v4/#replace-nested-classes-selectors-with-global-class-names)简要提到了这一点。 (2认同)

Answer 2

正如 Soothran 在评论中提到的，这是由TableCell. 下面是一种自定义方法。

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

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

Answer 3

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

<TableCell sx={{ borderBottom: "none" }}>
  {/* ... */}
</TableCell>

Answer 4

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

sx={{ "& td": { border: 0 } }}