小编McM*_*lch的帖子

我对 Material-UI Table 组件及其大小和可滚动性有疑问。

短的：

如果 Material-UI 表格组件的父组件具有固定大小，则该组件只能滚动。如果我将大小设置为 100% 适合父级，则会溢出。

长的：

我在 Reactjs 中有一个简单的 Web 应用程序，它由标题、正文（表格所在的位置）和页脚组成。我的应用程序组件的样式被设计为分布这三个基本布局组件，如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
    maxHeight: "100vh",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
  },
}));

效果很好。我的身体组件占据了所有可用空间来填充整个视口。该组件如下所示：

<div className={classes.root}>
   <Controls /> //just some buttons, arranged in one line
   <Table /> //my table component, which uses pagination
</div>

该表本身使用分页，并且默认每页 10 行。

它的 CSS 看起来像这样：

root: {
    maxHeight: "100%",
    display: "grid",
    gridTemplateRows: "min-content 1fr",
    gap: "25px",
  },

表组件本身如下所示：

<div className={classes.root}>
      {loading ? …