Как центрировать компонент в Material-UI и сделать его отзывчивым? - PullRequest
Новая
       53

Как центрировать компонент в Material-UI и сделать его отзывчивым?

0 голосов
/ 08 июня 2018

Я не совсем понимаю сеточную систему React Material-UI.Если я хочу использовать компонент формы для входа в систему, какой самый простой способ центрировать его на экране на всех устройствах (мобильных и настольных)?

Ответы [ 5 ]

0 голосов
/ 13 апреля 2019

Вот еще один вариант без сетки: 

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>
0 голосов
/ 28 декабря 2018

Версия @ Nadun не работает для меня, размер не работает хорошо.Удален direction="column" или изменен на row, помогает создавать вертикальные формы входа с адаптивным размером. 

<Grid
        container
        spacing={0}
        alignItems="center"
        justify="center"
        style={{ minHeight: '100vh' }}
      >
  <Grid item xs={6}>
  </Grid>
</Grid>
0 голосов
/ 10 июня 2018

Другой вариант: 

<Grid container justify = "center">
  <Your centered component/>
</Grid>
0 голосов
/ 10 июня 2018

Так как вы собираетесь использовать это на странице входа.Вот код, который я использовал на странице входа в систему с использованием Material-UI 

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid>

. Это сделает эту форму входа в центре экрана.

Но, тем не менее, IE не поддерживаетMaterial-UI Grid, и вы увидите некоторое неуместное содержимое в IE.

Надеюсь, это поможет вам.

0 голосов
/ 08 июня 2018

Все, что вам нужно сделать, это обернуть ваш контент внутри тега Grid Container, указать интервал, а затем обернуть фактическое содержимое внутри тега Grid Item. 

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

    <Grid item xs={3}>
      <rightHeaderContent/>
    </Grid>
  </Grid>

Кроме того, я боролся с материаломочень много, я предлагаю вам оформить flexbox, который встроен в CSS автоматически, и вам не нужны никакие дополнительные пакеты для использования.Его очень легко выучить.

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

...