每次重新渲染时，材质 UI 网格宽度都会缩小答案

【问题标题】：Material UI Grid width shrinks on every re-render每次重新渲染时，材质 UI 网格宽度都会缩小
【发布时间】：2020-07-14 13:46:38
【问题描述】：

我正在尝试使用 MUI Grid 组件在 5x5 网格上呈现 25 个单词的列表。 5x5 网格本身是一个<Grid container direction="column">，包含五个<Grid item>。在这五个<Grid item> 中的每一个中都有以下结构：

<Grid container direction = "row">
  <Grid item xs={2} key={1}>
    <Paper>
      <Typography> word </Typography>
    </Paper>
  <Grid>
  <Grid item xs={2} key={2}>
    ...
  </Grid>
  ...
  <Grid item xs={2} key={5}>
    ...
  </Grid>
</Grid>

它最初按预期呈现。但是，每当组件重新渲染时，网格的宽度都会在每次重新渲染时逐位减小。

我在这里重现了这个问题：

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

您<Grid item> 没有定义大小。相应地设置大小：

示例

<Grid container direction = "row">
  <Grid item  xs={12} sm={6} md={3} lg={3} xl={2}>
    <Paper>
      <Typography> word </Typography>
    </Paper>
  <Grid>
</Grid>

也没有像key 这样的网格道具。它是 React 用于识别地图函数中的组件的属性。它与材质 UI 无关

更新

来自

<Grid item md={12}>
 <Grid container alignItems="center" justify="center">
   {wordRows}
 </Grid>
</Grid>

到

<Grid item container alignItems="center" justify="center">
   {wordRows}
</Grid>

【讨论】：

我在网格项目中使用了xs={2}（我在代码框示例中添加了它们，但在这里忘记将它们包含在sn-p中。我已经编辑了帖子以添加它）。我需要xs={2}，因为我需要它是所有屏幕上的 5x5 网格。但这并不能解决问题。在 for 循环中生成网格项时，将 key 属性添加到代码中。我在这里添加了它，以便清楚地看到容器中有 5 个项目。
工作就像一个魅力！你知道为什么会这样吗？
虽然我不是这方面的高手，但在我的理解中，Item 是一个块元素。 Container 是一个 Flex 项目，其属性名称为 flex-shrink: 4;，因此相对于其父级，它可以灵活地缩小，Item 并没有阻止它，因为它没有定义宽度。所以当容器缩小时，项目也在缩小。