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

Question

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

<Grid item>

最初呈现预期的效果。但是，只要重新渲染组件，网格的宽度就会在每次重新渲染时逐点减小。

我在这里重新创建了问题：

Answer 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这样的Grid道具。它是React用来标识映射函数中组件的属性。与材料UI无关

已更新

来自

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

收件人

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