Ширина сетки пользовательского интерфейса материала уменьшается при каждом повторном рендеринге

Question

Я пытаюсь отобразить список из 25 слов в сетке 5x5, используя компонент MUI Grid. Сама сетка 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>

Первоначально он отображается так, как ожидалось. Однако при каждом повторном рендеринге компонента ширина сетки уменьшается побитно при каждом повторном рендеринге.

Я воссоздал проблему здесь: Редактировать ошибку сжатия сетки MUI

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>

Также для 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>