MUI - How to align a component to the center/right?

I want to align my button to the right of the parent.

I was wondering if there is a proper way to do it in MUI. I could use:

<Grid container justify="flex-end">

But then I would have to use another <Grid item />. Seems too much of work.

Or maybe I am just better off using plain old CSS, messing around with float: right and dealing with the apparent zero height of the element.

BEFORE MUI 5:

Try this

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

UPDATE MUI 5: (Thanks to Dipak)

The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.

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

Update: The best solution is the answer of NearHuscarl, you'd better use Stack than Grid.

If you would like to align items within the <Grid item> you can use a wrapping Box component as follows:

<Grid container>
  <Grid item sm={6}>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

See the docs for more positioning options.

In MUI v5, you can use Stack to display a set of components on a row or a column. Stack is a flexbox so you only need to set the justifyContent prop to align the item inside:

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

If you do not want to use the Grid component, you have to rely on CSS.

But if you use Material-UI you should use JSS (CSS-IN-JS) and not plain CSS.

• Introduction : https://material-ui.com/customization/css-in-js/
• Benefits : http://cssinjs.org/benefits

In CSS you may use any of these solutions for example. "text-align" being the simplest one.

• text-align: right
• float: right
• flexbox
  • parent with : display: flex
  • child with : align-content: flex-end