How to align a component to the center/right

Try this

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

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

Tags:

Javascript

Reactjs

Material Ui

Related