How can I make Dialog take 80% of the screen in Material-UI?

Question

I am working with Material-UI Dialog and I want to make it take 80% of the screen. Ideally, I want something like this.

I am applying a margin to Dialog but it is not working as intended.

Solution 1

For older material-ui versions like 0.20.0:

<Dialog
   title="Dialog With 80% Width"
   modal={true}
   contentStyle={{
      width: '80%',
      maxWidth: 'none',
   }}
   open={true}
>
   This dialog spans the 80% width of the screen.
</Dialog>

---

And in material-ui V1 using these props may can help with your needs

fullWidth={true}
maxWidth = {'md'}

Here is examples and other props for Dialog component, or in more advanced way you can take a look into Dialog component code see what is happening there.

Solution 2

The paperFullWidth css class of Dialog component might be helpful. The only condition for using this class is the fullWidth prop of Dialog component should be true. Below is a sample snippet

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  dialogCustomizedWidth: {
    'max-width': '80%'
  }
});

const DialogExample = ({ classes }) => (
  <Dialog
    open
    fullWidth
    classes={{ paperFullWidth: classes.dialogCustomizedWidth }}
  >
    I'm a Dialog with customized width.
  </Dialog>
);

export default withStyles(styles)(DialogExample);