Как центрировать компонент в Material-UI и сделать его отзывчивым?
Я не совсем понимаю сеточную систему React Material-UI. Если я хочу использовать компонент формы для входа в систему, как проще всего разместить его по центру экрана на всех устройствах (мобильных и настольных)?
да я про ту же библиотеку
Ответы 7
Все, что вам нужно сделать, это обернуть ваш контент внутри тега 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/
Спасибо, поэтому я использовал 3 элемента сетки и поместил компонент посередине, чтобы центрировать его?
Другой вариант:
<Grid container justify = "center">
<Your centered component/>
</Grid>
Хотя это работает, использование контейнера Grid без элемента Grid является недокументированным поведением и может сломаться в любой момент (хотя, вероятно, этого не произойдет).
Поскольку вы собираетесь использовать это на странице входа в систему. Вот код, который я использовал на странице входа с использованием 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.
Надеюсь, что это поможет вам.
Небольшая поправка, для варианта использования Op направление изгиба должно быть row >>> direction = "row"
Обычно alignItems = center и justify = center помещает компонент в центр страницы, но это не так. Добавление style = {{minHeight: '100vh'}} выполняет свою работу, но добавляет полосу прокрутки на странице. Как это будет исправлено?
Спасибо. После нескольких часов поиска, наконец, это тот, который помог мне создать FormLabel и TextField бок о бок в одной строке.
Версия @ Nadun у меня не подошла, размер не работал. Удален direction = "column" или заменен на row, помогает создавать вертикальные формы входа в систему с адаптивным изменением размеров.
<Grid
container
spacing = {0}
alignItems = "center"
justify = "center"
style = {{ minHeight: "100vh" }}
>
<Grid item xs = {6}></Grid>
</Grid>;
Вот еще один вариант без сетки:
<div
style = {{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
У меня это очень хорошо сработало для центрирования компонента Material-UI <Fab>. В качестве дополнения в методе translate первый параметр - это горизонтальный перевод, а второй - вертикальный перевод.
У этого решения есть проблема, оно сократит размер компонента на 50% по ширине и высоте.
Вы можете сделать это с помощью компонента Box:
import Box from "@material-ui/core/Box";
...
<Box
display = "flex"
justifyContent = "center"
alignItems = "center"
minHeight = "100vh"
>
<YourComponent/>
</Box>
С другими использованными ответами xs = 'auto' помог мне.
<Grid container
alignItems='center'
justify='center'
style = {{ minHeight: "100vh" }}>
<Grid item xs='auto'>
<GoogleLogin
clientId = {process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText = "Log in with Google"
onSuccess = {this.handleLogin}
onFailure = {this.handleLogin}
cookiePolicy = {'single_host_origin'}
/>
</Grid>
</Grid>
На всякий случай, вы говорите об этой библиотеке - material-ui.com, верно?