如何调整新 Material UI v5 的表格高度

Question

在下面的代码sn-p中我想减少行的高度material-ui code example。

    import * as React from "react";
    import { styled } from "@mui/material/styles";
    import Table from "@mui/material/Table";
    import TableBody from "@mui/material/TableBody";
    import TableCell, { tableCellClasses } from "@mui/material/TableCell";
    import TableContainer from "@mui/material/TableContainer";
    import TableHead from "@mui/material/TableHead";
    import TableRow from "@mui/material/TableRow";
    import Paper from "@mui/material/Paper";

    const StyledTableCell = styled(TableCell)(({ theme }) => ({
      root: {
        height: "20px"
      },
      [`&.${tableCellClasses.head}`]: {
        backgroundColor: theme.palette.common.black,
        color: theme.palette.common.white
      },
      [`&.${tableCellClasses.body}`]: {
        fontSize: 14
      }
    }));

    const StyledTableRow = styled(TableRow)(({ theme }) => ({
      root: {
        height: "20px"
      },
      "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover
      },
      // hide last border
      "&:last-child td, &:last-child th": {
        border: 0
      }
    }));

    function createData(name, calories, fat, carbs, protein) {
      return { name, calories, fat, carbs, protein };
    }

    const rows = [
      createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
      createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
      createData("Eclair", 262, 16.0, 24, 6.0),
      createData("Cupcake", 305, 3.7, 67, 4.3),
      createData("Gingerbread", 356, 16.0, 49, 3.9)
    ];

    export default function CustomizedTables() {
      return (
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 700 }} 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>
      );
    }

我尝试像这样自定义 css：

const StyledTableCell = styled(TableCell)(({ theme }) => ({
    root: {
        height: "30px",
        padding: 0,
    },
    [`&.${tableCellClasses.head}`]: {
        backgroundColor: theme.palette.common.black,
        color: theme.palette.common.white,
    },
    [`&.${tableCellClasses.body}`]: {
        fontSize: 14,
    },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
    root: {
        height: "30px",
    },
    "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover,
    },
    // hide last border
    "&:last-child td, &:last-child th": {
        border: 0,
    },
}));

但不幸的是，没有任何改变。显然我改变了错误的属性。那么如何改变行高呢？

更新

我在最后一列中有一些按钮可以防止行变小。 cmets中的解决方案以及提供的答案工作。

Answer 1

你需要导入tableRowClasses:

import TableRow, { tableRowClasses } from "@mui/material/TableRow";

然后，您可以自定义您的 TableRow

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  [`&.${tableRowClasses.root}`]: {
    height: "200px"
  },

Demo