How to change the position of material-ui's dialog?

Question

Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.

Thanks in advance!

Answer 1

You can create styles and pass it through classes prop. Here is an example of how you could do that.

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
      }}

      /* rest of the props */
    >
      {/* content of the dialog */}
    </Dialog>
  );
}