Material-ui中如何去除整个表格的边框答案

【问题标题】：How to remove the border around the entire table in Material-uiMaterial-ui中如何去除整个表格的边框
【发布时间】：2020-11-02 05:24:00
【问题描述】：

我正在尝试在 Material-ui 中编辑表格，但我不想将其显示为卡片。我想删除整个表格周围的边框，但我找不到任何关于删除文档页面上的边框的信息。谁能帮帮我？

关于组件的链接：https://material-ui.com/components/tables/#other

代码：

import React from 'react';
import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

......

export default function CustomizedTables() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
            <StyledTableCell align="right">Calories</StyledTableCell>
            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.name}>
              <StyledTableCell component="th" scope="row">
                {row.name}
              </StyledTableCell>
              <StyledTableCell align="right">{row.calories}</StyledTableCell>
              <StyledTableCell align="right">{row.fat}</StyledTableCell>
              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
              <StyledTableCell align="right">{row.protein}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

【问题讨论】：

您是要删除行上的边框还是整个表格周围的边框？
@Hyetigran 我正在尝试删除整个表格周围的边框

标签： css reactjs material-ui

【解决方案1】：

给 TableContainer 组件添加 className

 <TableContainer className={classes.tableContainer} component={Paper}>

添加自定义样式以使用样式挂钩

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  tableContainer: {
    boxShadow: "none"
  }
});

我的方法：在代码沙箱中，我打开了 devtools 并检查了组件，直到找到标签。因为是最外层，所以应该是 TableContainer 组件。

因此，如果您想消除底部边框，请找到它设置的标签并覆盖 useStyle 挂钩中的那些组件。

【讨论】：

谢谢你！ boxShadow 正是我正在寻找的属性！

【解决方案2】：

TableContainer 使用Paper（具有默认高度）作为其背景，这就是它像卡片一样显示的原因。删除 component={Paper} 部分将删除这些类。

这样使用

<TableContainer >

【讨论】：

这很好，很简单！