0
2.7K
VistasMUI - 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.
3 Respuestas
Responde la pregunta0
BEFORE MUI 5:
Try this
<Grid container justify="flex-end">
<Button>Example</Button>
</Grid>
UPDATE MUI 5: (Thanks to Dipak)
The prop
justifyofForwardRef(Grid)is deprecated. UsejustifyContentinstead, 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.
0
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.
0
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>
