我想编辑CSS的各种和元素Table
和TableCells
,但我仍然不能使线消失。如何使Table
MUI中元素的行之间的线条消失?
如何删除 MUI 表中单元格之间的线条
IT技术
html
css
reactjs
material-ui
2021-05-25 09:54:37
4个回答
如果您使用的是MUI v5,则可以使用sx
props。新的 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"
}
}}
>
现场演示
要删除特定表格单元格的边框线,请使用:
<TableCell style={{borderBottom:"none"}}></TableCell>
classes={{ root: classes.MuiTableCell}} 一个 Tablecell 的类,然后 MuiTableCell: { borderBottom: "none" }
这对删除表格单元格的 BorderBottom 行很有效。