How can I set a height to a Dialog in Material-UI?

Question

I'm going with the Material-UI example for a Dialog with a custom width:

const customContentStyle = {
  width: '100%',
  maxWidth: 'none',
};

// some omitted code

<Dialog
  title="Dialog With Custom Width"
  actions={actions}
  modal={true}
  contentStyle={customContentStyle}
  open={this.state.open}
>
  This dialog spans the entire width of the screen.
</Dialog>

I know that I'm able to set a custom width because I've overridden the maxWidth, however I want to be able to do the same with the height so that I can resize the height of the dialog. I've tried setting the maxHeight to none and setting height, but I've had no luck with it.

Answer 1

Set the height of the DialogContent child instead. The dialog will grow to contain its contents. You can do this with css / classname, etc... but to do it inline, here is a code-snippet:

<Dialog
        open={open}
        fullWidth
        maxWidth='lg' // set width according to defined material ui breakpoints
        onClose={handleClose}
>
        <DialogContent
        style={{height:'600px'}}> // set height by pixels, percentage, etc
            //insert content here
        </DialogContent>
</Dialog>

Answer 2

In MUI v5, you can override the max-height value of the inner Paper component by using this code:

<Dialog
  PaperProps={{
    sx: {
      width: "50%",
      maxHeight: 300
    }
  }}
  {...other}
>

Live Demo

Answer 3

If you're using a newer version of material-ui use this:

import MuiDialog from '@material-ui/core/Dialog';

const Dialog = withStyles((theme) => ({
  paper: {
    height: '100%' // 100% is for full height or anything else what you need
  },
}))(MuiDialog);

export default function SomeComponentThatUsesCustomizedDialog() {
    return (
        <Dialog>
        ...
        </Dialog>
    )
}

The dialogPaper prop used in the accepted answer doesn't work for me and throws an error in the console (we're using material-ui v.4.11+, where it's not even listed in the official dialog css api docs). Hence, use the paper prop instead.

Inspired by official example.

Answer 4

Some of the answers seem so overly complex, here's a quick and clean in-line method that works for MUI v4 and possibly for v5 too:

<Dialog
  open={true}
  onClose={onClose}
  ... and other props
  PaperProps={{ style: {
    minHeight: '90%',
    maxHeight: '90%',
  }}}
>