0
2.6K
VistasMUI - ¿Cómo alinear un componente al centro/derecha?
Quiero alinear mi botón a la derecha del padre.
Me preguntaba si hay una forma adecuada de hacerlo en MUI. Podría usar:
<Grid container justify="flex-end"> Pero entonces tendría que usar otro <Grid item /> . Parece demasiado trabajo.
O tal vez sea mejor usar CSS simple y antiguo, jugando con float: right y lidiando con la altura cero aparente del elemento.
3 Respuestas
Responde la pregunta0
ANTES DE MUI 5:
Prueba esto
<Grid container justify="flex-end"> <Button>Example</Button> </Grid>ACTUALIZACIÓN MUI 5: (Gracias a Dipak)
La
justifyde prop deForwardRef(Grid)está en desuso. En su lugar, usejustifyContent, se cambió el nombre de la propiedad.
<Grid container justifyContent="flex-end"> <Button>Example</Button> </Grid>Actualización: la mejor solución es la respuesta de NearHuscarl, es mejor que uses Stack que Grid.
0
Si desea alinear elementos dentro del <Grid item> , puede usar un componente de Box envolvente de la siguiente manera:
<Grid container> <Grid item sm={6}> <Box display="flex" justifyContent="flex-end"> <Button>Button Aligned To The Right</Button> </Box> </Grid> </Grid>Consulte los documentos para obtener más opciones de posicionamiento.
0
En MUI v5 , puede usar Stack para mostrar un conjunto de componentes en una fila o columna. Stack es un flexbox, por lo que solo necesita configurar el apoyo de justifyContent para alinear el elemento dentro:
<Stack direction="row" justifyContent="end"> <Button variant="contained">Item 1</Button> </Stack> 