css 如何在材质UI表中删除单元格之间的线条

weylhg0b  于 2023-06-07  发布在  其他
关注(0)|答案(6)|浏览(718)

我试着编辑各种CSS和TableTableCells的元素,但我仍然不能使线条消失。如何在Material UI中的Table元素中使行之间的线条消失?

gg58donl

gg58donl1#

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

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

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

taor4pac

taor4pac2#

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

现场演示

mlnl4t2r

mlnl4t2r3#

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

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

1sbrub3j4#

要删除特定TableRow的边框,可以用途:

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

owfi6suc5#

class ={{ root:classes.MuiTableCell}}表单元格的class,然后是MuiTableCell:{ borderBottom:“无”}
这对我来说很好,可以删除一个桌格的边框底线。

lb3vh1jj

lb3vh1jj6#

要删除表格边框线,请执行以下操作:
.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}

相关问题