CODEWITHSUNDEEP
cssreactjsmaterial-ui
Smi28
Smi28

Reputation: 57

React Material-UI modal width not working

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>

Upvotes: 1

Views: 1833

Answers (1)

Louay Al-osh
Louay Al-osh

Reputation: 3405

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

Upvotes: 2

Related Questions