MUI v5 createTheme中v4 disableBackdropClick全局配置等效替代方案咨询

背景说明 #

MUI v4 中可以通过createMuiTheme的全局配置禁用Dialog背景点击：

props: {
  MuiDialog: {
    disableBackdropClick: true,
  },
},

该属性在v5版本被正式移除，可通过以下方案实现相同需求：

实现方案 #

方案1：全局统一配置（推荐） #

v5版本中createMuiTheme已重命名为createTheme，直接在主题配置的components.MuiDialog.defaultProps中添加默认的onClose逻辑即可：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiDialog: {
      defaultProps: {
        onClose: (event, reason) => {
          // 拦截背景点击触发的关闭行为
          if (reason === 'backdropClick') return;
          // 其余关闭场景（如点击关闭按钮、ESC键）默认正常执行
        }
      }
    }
  }
});

配置完成后，项目中所有未单独指定onClose的Dialog都会默认禁用背景点击功能。

方案2：单个Dialog单独配置 #

如果不需要全局生效，仅需要给特定Dialog禁用背景点击，直接在对应组件的onClose回调中添加判断即可：

<Dialog
  open={open}
  onClose={(event, reason) => {
    if (reason === 'backdropClick') return;
    // 其余自定义关闭逻辑
  }}
>
  {/* 对话框内容 */}
</Dialog>

补充说明 #

如果需要同时全局禁用ESC键关闭Dialog的功能，只需要在全局的onClose逻辑中额外增加对escapeKeyDown类型的判断拦截即可。

内容的提问来源于stack exchange，提问作者Aaron Becker