In MUI v4, you could globally disable backdrop clicks of modals or dialogs by doing this within createMuiTheme
props: {
MuiDialog: {
disableBackdropClick: true,
},
},
disableBackdropClick was removed in v5; is there an alternative for globally disabling backdrop clicks?
The migration guide suggests overriding the close handler and decide whether the Dialog can be closed based on the close reason:
<Modal
onClose={(event, reason) => {
if (reason !== 'backdropClick') {
handleClose(event, reason);
}
}}
But if you want to disableBackdropClick in createTheme globally, you need to disable the click event at 2 places: in the Dialog's root component and and the Backdrop component to prevent the onClose callback from being invoked:
createTheme({
components: {
MuiDialog: {
defaultProps: {
onClick: (e) => e.stopPropagation(),
BackdropProps: {
sx: {
pointerEvents: 'none',
},
},
},
},
},
});
