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

I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'

You can use the following code to always align your dialog to the top of the page with two custom classes.

• Demo: codesandbox.io
• See the original article with explanation

const useStyles = makeStyles({
  topScrollPaper: {
    alignItems: 'flex-start',
  },
  topPaperScrollBody: {
    verticalAlign: 'top',
  },
})

function SimpleDialog(props: SimpleDialogProps) {
  const classes = useStyles()
  return (
    <Dialog
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      open={open}
      scroll="paper"
      classes={{
        scrollPaper: classes.topScrollPaper,
        paperScrollBody: classes.topPaperScrollBody,
      }}
    ></Dialog>
  )
}

Answer 2

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