Как исправить дополнительные отступы от нескольких вложенных сеток в Material UI? - PullRequest
Новая
       23

Как исправить дополнительные отступы от нескольких вложенных сеток в Material UI?

0 голосов
/ 10 июля 2020

Я пытаюсь сделать сетку, содержащую множество элементов разных размеров. Эти элементы должны иметь одинаковые отступы, что означает, что они должны быть идеально выровнены друг с другом. Эта сетка должна быть адаптивной, и при переключении в режим xs каждый элемент должен иметь ширину 12, что означает, что элементы должны располагаться один поверх другого.

Вот макет Я пытаюсь использовать материальный компонент сетки пользовательского интерфейса:

Этот кодовый ящик показывает, чего я достиг до сих пор. Единственная проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я добавляю сетку внутри другой, заполнение вложенных сеток складывается, и в итоге я получаю невыровненные элементы.

Это код для сетки: 

<div className={classes.root}>
  <Grid
    container
    spacing={1}
    alignItems="stretch"
    style={{
      minHeight: "500px",
      maxWidth: "600px",
      backgroundColor: "green"
    }}
  >
    <Grid item xs={12} sm={8} container spacing={1} alignItems="stretch">
      <Grid container item xs={12} spacing={1} alignItems="stretch">
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>1</Paper>
        </Grid>
        <Grid
          container
          item
          xs={12}
          sm={6}
          spacing={1}
          alignItems="stretch"
        >
          <Grid item xs={12}>
            <Paper className={classes.paper}>2</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}>3</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}>4</Paper>
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12}>
        <Paper className={classes.paper}>5</Paper>
      </Grid>
    </Grid>
    <Grid item xs={12} sm={4}>
      <Paper className={classes.paper}>6</Paper>
    </Grid>
  </Grid>
</div>

В некоторых сообщениях я видел, что мы не должны использовать свойства элементов и контейнеров в одном компоненте сетки, но я сделал это, поскольку в примере вложенной сетки пользовательского интерфейса материала они используют оба свойства в компоненте сетки.

Я также пробовал жестко установить отступы, но выравнивание прерывается в режиме xs. Это поля вложенных сеток в пользовательском интерфейсе материала - самый близкий вопрос, который я нашел в StackOverflow, но я не смог достичь своей цели, используя предложенный ответ.

Я также прочитал документацию по Пользовательский интерфейс материала , в котором показан простой пример вложенных сеток, но в этом случае есть только один уровень вложенных сеток, и макет довольно прост по сравнению с тем, что я пытаюсь достичь.

Может ли кто-нибудь объяснить мне, что я делаю неправильно / чего не понимаю / как я могу достичь своей цели?

...