React Answers

How to change the position of a React Material UI dialog?

Spread the love

To change the position of a React Material UI dialog, we call makeStyles to return classes with the styles we want.

For instance, we write

import React from "react";
import { makeStyles, Dialog } from "@material-ui/core";

const useStyles = makeStyles({
  dialog: {
    position: "absolute",
    left: 10,
    top: 50,

function Example() {
  const classes = useStyles();

  return (
        paper: classes.dialog,

to call makeStyles with an object to create the dialog class with the dialog styles inside.

Then we call useStyles returned from makeStyles to return the classes object.

And we set the paper class to the classes.dialog class.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *