No entiendo muy bien el sistema de cuadrícula React Material-UI. Si quiero usar un componente de formulario para iniciar sesión, ¿cuál es la forma más fácil de centrarlo en la pantalla en todos los dispositivos (móviles y de escritorio)?
Ya que va a usar esto en una página de inicio de sesión. Aquí hay un código que usé en una página de inicio de sesión usando Material-UI
MUI v5
<Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" style={{ minHeight: '100vh' }} > <Grid item xs={3}> <LoginForm /> </Grid> </Grid>MUI v4 y anteriores
<Grid container spacing={0} direction="column" alignItems="center" justify="center" style={{ minHeight: '100vh' }} > <Grid item xs={3}> <LoginForm /> </Grid> </Grid>esto hará que este formulario de inicio de sesión esté en el centro de la pantalla.
Pero aún así, IE no es compatible con Material-UI Grid y verá contenido fuera de lugar en IE.
Como señaló @max, otra opción es,
<Grid container justifyContent="center"> <Your centered component/> </Grid>Tenga en cuenta que las versiones MUIv4 e inferiores deben usar en su lugar justify="center".
Sin embargo, usar un contenedor de Grid sin un elemento de Grid es un comportamiento no documentado.
Espero que esto te ayudará.
Otra opción es:
<Grid container justify = "center"> <Your centered component/> </Grid>Puede hacer esto con el componente Box:
import Box from "@material-ui/core/Box"; ... <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh" > <YourComponent/> </Box>