MUI - How to align a component to the center/right?
JavascriptReactjsMaterial UiJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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>
Solution 4 - Javascript
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
- parent with :
Solution 5 - Javascript
Use the Box component with flex.
<Box display="flex" flexDirection="column" >
<... other stuff/>
</Box>
You can learn more here
Solution 6 - Javascript
For Latest material-ui version 5 use justifyContent="flex-end" or alignContent which is equivalent to css text-align and flex-end=right
<Grid container alignContent="flex-end">
<Button>Example</Button>
</Grid>
or
<Grid item justifyContent="flex-end">
<Button>Example</Button>
</Grid>
For old material-ui version 4
<Grid item justify="flex-end">
<Button>Example</Button>
</Grid>
Solution 7 - Javascript
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
<Typography sx={{ fontWeight: 600 }}>
Recent Repositories
</Typography>
<Box>
{/* <Typography></Typography> */}
<Button error>+ New</Button>
</Box>
</Toolbar>
Solution 8 - Javascript
Material UI's Grid Component has helper props to achieve this.
<Grid align-items-xs-center justify-xs-flex-end>
<Button>Click me</Button>
</Grid>
You can find the docs here.