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

IT技术 html css reactjs material-ui
2021-05-25 09:54:37

我想编辑CSS的各种和元素TableTableCells,但我仍然不能使线消失。如何使TableMUI元素的行之间的线条消失

4个回答

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

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

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

编辑表无行

如果您使用的是MUI v5,则可以使用sxprops。新的 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"
    }
  }}
>

现场演示

编辑 57325232/how-to-remove-lines-between-cells-in-table-in-material-ui

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

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

classes={{ root: classes.MuiTableCell}} 一个 Tablecell 的类,然后 MuiTableCell: { borderBottom: "none" }

这对删除表格单元格的 BorderBottom 行很有效。