我试着编辑各种CSS和Table和TableCells的元素,但我仍然不能使线条消失。如何在Material UI中的Table元素中使行之间的线条消失?
Table
TableCells
gg58donl1#
正如Soothran在评论中提到的,这是由TableCell的底部边框控制的。下面是一种自定义的方法。
TableCell
import MuiTableCell from "@material-ui/core/TableCell"; const TableCell = withStyles({ root: { borderBottom: "none" } })(MuiTableCell);
taor4pac2#
如果您使用的是MUI v5,可以使用sx prop 。新的MUI版本还添加了tableCellClasses对象,以帮助您以类型安全的方式引用组件CSS className,而不是使用硬编码字符串"MuiTableCell-root":
sx
tableCellClasses
"MuiTableCell-root"
import Table from "@mui/material/Table"; import TableCell, { tableCellClasses } from "@mui/material/TableCell";
<Table sx={{ [`& .${tableCellClasses.root}`]: { borderBottom: "none" } }} >
mlnl4t2r3#
要删除特定表格单元格的边框线,请使用用途:
<TableCell style={{borderBottom:"none"}}></TableCell>
1sbrub3j4#
要删除特定TableRow的边框,可以用途:
sx={{ "& td": { border: 0 } }}
owfi6suc5#
class ={{ root:classes.MuiTableCell}}表单元格的class,然后是MuiTableCell:{ borderBottom:“无”}这对我来说很好,可以删除一个桌格的边框底线。
lb3vh1jj6#
要删除表格边框线,请执行以下操作:.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}
.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}
6条答案
按热度按时间gg58donl1#
正如Soothran在评论中提到的,这是由
TableCell
的底部边框控制的。下面是一种自定义的方法。taor4pac2#
如果您使用的是MUI v5,可以使用
sx
prop 。新的MUI版本还添加了tableCellClasses
对象,以帮助您以类型安全的方式引用组件CSS className,而不是使用硬编码字符串"MuiTableCell-root"
:现场演示
mlnl4t2r3#
要删除特定表格单元格的边框线,请使用用途:
1sbrub3j4#
要删除特定TableRow的边框,可以用途:
owfi6suc5#
class ={{ root:classes.MuiTableCell}}表单元格的class,然后是MuiTableCell:{ borderBottom:“无”}
这对我来说很好,可以删除一个桌格的边框底线。
lb3vh1jj6#
要删除表格边框线,请执行以下操作:
.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}