如何在Material UI表格中缩小表格单元格？

Question

我正在使用Material UI和ReactJS。这是我第一次使用Material UI并做出反应，但是我很难解决问题。我想缩小我的细胞。但是，设置width和height的代码无法正常工作。似乎在元素中设置了最少的width和height选项，当我用makeStyles代码覆盖它们时，选项并没有变小。我还尝试通过代码更改minHeight和minWidth并在sass文件中工作，但是它也不起作用。

import React, { Component } from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300,
    height: 600,
    minHeight: 0
  },
  table: {},
  row: {
    height: 10
  },
  cell: {
    fontSize: "10px",
    height: 10,
    minHeight: 5,
    width: 10,
    minWidth: 10
  }
}));

export default function TimeTable() {
  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead className={classes.head}>
          <TableRow className={classes.row}>
            <TableCell></TableCell>
            <TableCell className={classes.cell}>월</TableCell>
            <TableCell className={classes.cell}>화</TableCell>
            <TableCell className={classes.cell}>수</TableCell>
            <TableCell className={classes.cell}>목</TableCell>
            <TableCell className={classes.cell}>금</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, i) => (
            <TableRow>
              {i % 2 === 0 && (
                <TableCell className={classes.cell} key={i} rowSpan="2">
                  {9 + Math.floor(i / 2)}
                </TableCell>
              )}
              {row.Monday === "" ? (
                <TableCell className={classes.cell} />
              ) : (
                i % row.Monday.slice(0, 1) === 0 && (
                  <TableCell
                    className={classes.cell}
                    rowSpan={row.Monday.slice(0, 1)}
                  >
                    {row.Monday.slice(2)}
                  </TableCell>
                )
              )}
              {row.Tuesday === "" ? (
                <TableCell className={classes.cell} />
              ) : (
                i % row.Tuesday.slice(0, 1) === 0 && (
                  <TableCell
                    className={classes.cell}
                    rowSpan={row.Tuesday.slice(0, 1)}
                  >
                    {row.Tuesday.slice(2)}
                  </TableCell>
                )
              )}
              {row.Wednesday === "" ? (
                <TableCell className={classes.cell} />
              ) : (
                i % row.Wednesday.slice(0, 1) === 0 && (
                  <TableCell
                    className={classes.cell}
                    rowSpan={row.Wednesday.slice(0, 1)}
                  >
                    {row.Wednesday.slice(2)}
                  </TableCell>
                )
              )}
              {row.Thursday === "" ? (
                <TableCell className={classes.cell} />
              ) : (
                i % row.Thursday.slice(0, 1) === 0 && (
                  <TableCell
                    className={classes.cell}
                    rowSpan={row.Thursday.slice(0, 1)}
                  >
                    {row.Thursday.slice(2)}
                  </TableCell>
                )
              )}
              {row.Friday === "" ? (
                <TableCell className={classes.cell} />
              ) : (
                i % row.Friday.slice(0, 1) === 0 && (
                  <TableCell
                    className={classes.cell}
                    rowSpan={row.Friday.slice(0, 1)}
                  >
                    {row.Friday.slice(2)}
                  </TableCell>
                )
              )}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

Page(className: root)的宽度和高度都可以很好地应用，因为您可以看到表格中的线。但是，不会应用table和cell的宽度和高度。我想把桌子放到Page(className: root)中。

Answer 1

@guzmonne- 这是最小的可复制示例。

在代码中-行的总宽度为700 px。长单元格的宽度应为600像素，短单元格的宽度应为100像素。事实并非如此。