Dialog width material-ui next

Add two props fullWidth and maxWidth="md" in your Dialog component like this :

<Dialog
  {...your_other_props}
  fullWidth
  maxWidth="sm"
>
  {/* Your dialog content */}
</Dialog>

You can change md to sm, xs, lg and xl as per your requirement.

As @mike partially mentioned you can pass down styles to specific child components (see available components for Dialog here), the body of the dialog is a Paper component so if you set the width of the Paper the dialog will be that width

//Set the styles
const useStyles = makeStyles(() => ({
  paper: { minWidth: "500px" },
}));

//Add the class to Paper
 <Dialog classes={{ paper: classes.paper}}>

This will make the dialog 500px wide.

According to the Material-UI v1 documentation for Dialog, the maxWidth prop is likely what you need. The implementation of the Dialog component takes in an enumerated list of maxWidth values ['xs', 'sm', 'md', false]. The fullWidth prop is also available to take advantage of a full screen...likely most useful on smaller screens.

You can also get fancy and override the styles using either inline styles with style, the JavaScript keyword className to adjust the class in the DOM, the classes prop to adjust the classes inserted by MUI, or you can even adjust the width values in the theme using the overrides concept. This is all laid out in the docs with some simple examples. It might take a few tries to target your customized CSS and make it work as you expect.

Dialog width material-ui next

Related

Recent Posts