MUI – ¿Cómo alinear un componente al centro/derecha?

Quiero alinear mi botón a la derecha del padre.

Me preguntaba si hay un correcto manera 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 estoy mejor usando CSS simple y antiguo, jugando con float: right y tratar con la altura cero aparente del elemento.

ANTES DE MUI 5:

Prueba esto

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

ACTUALIZACIÓN MUI 5: (Gracias a Dipak)

el accesorio justify de ForwardRef(Grid) es obsoleto. Usar justifyContent en cambio, se cambió el nombre del accesorio.

<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.

Si desea alinear elementos dentro del <Grid item> puedes usar un envoltorio Box componente 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>

Ver el documentos para más opciones de posicionamiento.

En MUI v5puedes usar Stack para mostrar un conjunto de componentes en una fila o una columna. Stack es un flexbox, por lo que solo necesita configurar el justifyContent prop para alinear el elemento en el interior:

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

Si no desea utilizar el componente Grid, debe confiar en CSS.

Pero si usa Material-UI, debe usar JSS (CSS-IN-JS) y no CSS simple.

• Introducción : https://material-ui.com/customization/css-in-js/
• Beneficios : http://cssinjs.org/beneficios

En CSS puede usar cualquiera de estas soluciones, por ejemplo. “text-align” es el más simple.

• text-align: right
• float: right
• caja flexible
  • padre con: display: flex
  • niño con : align-content: flex-end

Use el componente Box con flex.

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

Puedes aprender más aquí

Para la última versión de material-ui 5 use justificarContent=”flex-end” o alignContent que es equivalente a css text-align y flex-end=right

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justifyContent="flex-end">
         <Button>Example</Button>
    </Grid>

Para material antiguo-ui versión 4

    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>

            <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
                <Typography sx={{ fontWeight: 600 }}>
                    Recent Repositories
                </Typography>
                <Box>
                    {/* <Typography></Typography> */}
                    <Button error>+ New</Button>
                </Box>
            </Toolbar>