React Material-UI modal width not working

user_4564850 0
Viewed 833

I'm trying to increase the dialog width to display the full content. However, it just adds a horizontal scroll bar within the dialog without extending the width. I can see the blur property is applied to most of the page so why wont the form extend with it as well? Any help is greatly appreciated!

Here's my css:

infoModal: {
    backdropFilter: "blur(3px)",
    width: "90%"
  },
  modalBody: {
    width: 1000,
    display: 'flex', 
    flexDirection: 'column',
  },


<Dialog onClose={handleClose} open={open} className={classes.infoModal} fullWidth>
        <DialogContent className={classes.modalBody}>
</Dialog>
</DialogContent>
material-ui reactjs css
1 Answers

You have to override the dialog CSS rule names classes (check its API page at https://material-ui.com/api/dialog/).

Note that you have to pass the classes made to classes props and not className


const useDialogStyles = makeStyles({
    paper: {
        width: '800px'
    }
});

export function Component() {

    const dialogClasses = useDialogStyles();

    return (
        <Dialog classes={dialogClasses} open={true}>

        </Dialog>
    );
}

Check this sandbox for testing https://codesandbox.io/s/change-dialog-width-vux95

user_86677660
Related