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

Question

我尝试编辑各种CSS和Table和TableCells元素，但仍然无法让线条消失。在Material UI中，如何使Table元素中行之间的线条消失？

- pizzae

---

请展示相关的代码。我们无法猜测问题出在哪里。帮助我们帮助您。 - ScottieG

尝试使用.MuiTableCell-root{border-bottom: none}。 - Soothran

Answer 1

正如Soothran在评论中提到的那样，这由TableCell的底部边框控制。以下是一种自定义方式。

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

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

- Ryan Cogswell

Answer 2

如果您使用的是MUI v5，您可以使用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"
    }
  }}
>

演示

- NearHuscarl

---

你在哪里可以找到有关tableCellClasses的更多信息？ - Someone Special

@SomeoneSpecial 每个 MUI 组件都有一个 [component]Classes 常量。这在这里简要提到：(https://mui.com/guides/migration-v4/#replace-nested-classes-selectors-with-global-class-names)。 - NearHuscarl

这条信息的价值比答案本身更有分量。 - Someone Special

import { TableCell, tableCellClasses } from '@mui/material' 对我有用 :) - 可以让导入语句更简洁美观 - Mrk Sef

Answer 3

要去掉特定表格单元格的边框线，请使用：

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

- unsuredev

Answer 4

为了从特定的TableRow中删除边框，您可以使用以下代码：

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

- Rocco Maniscalco

---

这个可以工作，但请注意：如果您有可展开的内部表格，它也会应用于它们。 - Embedded_Mugs

Answer 5

classes={{ root: classes.MuiTableCell}} 是一个表格单元格的类，然后 MuiTableCell: { borderBottom: "none" }。这段代码可以完美地去掉表格单元格的下边框线。

（译者注：此代码为使用 Material UI 框架时自定义表格单元格样式的代码片段）

- Surya Prakash Gandikota

Answer 6

去掉表格边框线：

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

- femina joseph