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.