Sometimes, we want to align a component to the center or right with React Material UI.
In this article, we’ll look at how to align a component to the center or right with React Material UI.
How to align a component to the center or right with React Material UI?
To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.
For instance, we write:
import React from "react";
import { Grid, Button } from "@material-ui/core";
export default function App() {
return (
<Grid container justify="flex-end">
<Button>Example</Button>
</Grid>
);
}
We add the Grid component and add the container prop to make it a flexbox container.
Then we set the justify prop to flex-end to align the child components on the right side.
As a result, the Example button should stay on the right side of the page.
Conclusion
To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.
