如何去除材料UI表中的单元格之间的线

Question

Table

和

TableCells的元素，但我仍然无法使线路消失。如何使线路在材料UI中的

Table

元素中的行之间消失？

如果您使用

Answer 1

，则可以使用

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"
    }
  }}
>

livedemo

soothran在评论中提到的这是由

TableCell

Answer 2

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

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

去除特定表单元格的边界线：

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

Answer 3

要从可以使用的特定表格中卸下边框：sx={{ "& td": { border: 0 } }}

Answer 4

classes = {{root：class.muitablecell}} tablecell类，然后 MuitableCell：{ BorderBottom：“无” }我很好地删除了tablecell的边界线线。

Answer 5

卸下表边框线：

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

Answer 6

对于那些粘在MUI V4的人，这对我有用：

<TableCell style={{ borderBottomWidth: '0px'}}>content</TableCell>

Answer 7

<TableCell style={{ borderBottomWidth: '0px', paddingBottom: 'unset'}}>content</TableCell>