如何自动控制ui材质表高度？

【问题标题】：How can I control the ui material table height automatically?如何自动控制ui材质表高度？
【发布时间】：2025-12-06 07:50:01
【问题描述】：

我在我的 React JS 代码中使用 material-ui 中可用的 Table 组件，其中包含一行。我有一个“添加”图标按钮，用于添加所需的行数。如何根据行数扩大和缩小表格高度。如果行数（不包括页眉和页脚）超过20，那么我想在右边放一个滚动。我该如何处理？

【问题讨论】：

标签： material-ui

【解决方案1】：

请看一下这个解决方案：

https://codesandbox.io/s/basictable-material-demo-with-scroll-jsxwk?file=/demo.js.

它有一个默认的4行大小，可以通过一个文本字段来改变，并会自动调整表格的大小，滚动条会根据内容出现，你不必担心。

诀窍是自定义 TableContainer 和 Table 的 CSS：

const useStyles = makeStyles({
  tableContainer: {
    overflowY: "auto"
  },
  table: { //...
    height: "100%",
    overflowY: "scroll"
  }, //...
});

并在此处控制表格容器的高度：

const classes = useStyles();
const [maxRows, setMaxRows] = useState(4);
//...
return <TableContainer
        component={Paper}
        className={classes.tableContainer}
        style={{
          maxHeight: maxRows * ROW_HEIGHT + HEAD_ROW_HEIGHT
        }}
      >
  <Table stickyHeader className={classes.table}> 
    {/*...*/}
  </Table>
</TableContainer>

【讨论】：