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

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 (
    <Dialog
      classes={{
        paper: classes.dialog,
      }}
      //...
    >
      //...
    </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.