Я не совсем понимаю систему React Material-UI grid. Если я хочу использовать компонент формы для входа в систему, то какой самый простой способ сосредоточить его на экране на всех устройствах (мобильных и настольных)?
Как центрировать компонент в Material-UI и сделать его отзывчивым?
Ответ 1
Поскольку вы собираетесь использовать это на странице входа в систему. Вот код, который я использовал на странице входа, используя 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, и вы увидите некоторое неуместное содержимое в IE.
Надеюсь, что это поможет вам.
Ответ 2
Другой вариант:
<Grid container justify = "center">
<Your centered component/>
</Grid>
Ответ 3
Версия @Nadun не работает для меня, размер не работает хорошо. Удалил direction="column"
или изменил его на row
, помогает при построении вертикальных форм входа в систему с адаптивным размером.
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={6}>
</Grid>
</Grid>
Ответ 4
Вот еще один вариант без сетки:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
Ответ 5
Все, что вам нужно сделать, это обернуть содержимое в тег Grid Container, указать интервал, а затем обернуть фактическое содержимое внутри тега элемента Grid.
<Grid container spacing={24}>
<Grid item xs={8}>
<leftHeaderContent/>
</Grid>
<Grid item xs={3}>
<rightHeaderContent/>
</Grid>
</Grid>
Кроме того, я много боролся с материальной сетью, я предлагаю вам checkbox flexbox, который встроен в CSS автоматически, и вам не нужны какие-либо дополнительные пакеты для использования. Его очень легко узнать.
Ответ 6
как заставить реагировать компоненты по центру при различном разрешении экрана