如何使 Material UI 表格中的表格单元格更小？答案

【问题标题】：How do I make table cells smaller in a Material UI table?如何使 Material UI 表格中的表格单元格更小？
【发布时间】：2019-07-30 15:57:37
【问题描述】：

我正在使用 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)。

【问题讨论】：

您应该修改一些内容，以便我们能够为您提供帮助。首先，针对您的问题创建一个"Minimal, Reproducible Example"。包括您提到的这个Page 组件，并尝试更好地构建您的问题。尝试举例说明应该发生的事情以及正在发生的事情。

标签： reactjs material-ui

【解决方案1】：

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

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

【讨论】：