Как убрать границу вокруг всей таблицы в Material-ui

Question

Я пытаюсь редактировать таблицу в 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>
  );
}

Answer 1

TableContainer использует Paper (с высотой по умолчанию) в качестве фона, поэтому он отображается как карточка. Удаление части component={Paper} приведет к удалению этих классов.

Используйте его так

<TableContainer >

Answer 2

Добавить className в компонент TableContainer

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

Добавить собственный стиль для useStyle hook

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

Мой метод: в codeandbox я открыл инструменты разработчика и проверил компонент, пока не нашел тег . Поскольку это был самый внешний уровень, он, вероятно, был компонентом TableContainer.

Таким образом, если вы хотите удалить нижнюю границу, найдите, какой тег установлен, и перезапишите эти компоненты в хуке useStyle.