Material UI Modal异常：背景无模糊变暗、可点击且点击外部不关闭

问题根源 #

你的代码存在三个核心问题：

• 直接给Modal组件设置backdropFilter无效，该样式作用于Modal的内容容器而非背景遮罩层；同时错误地将内容容器的定位样式写在Modal根元素上，破坏了Modal的默认结构。
• disableEnforceFocus属性会让Modal放弃焦点锁定，导致后方元素仍可被点击。
• 背景遮罩层样式未正确配置，既无法实现变暗模糊效果，也无法响应外部点击关闭事件。

修复方案 #

调整代码结构，分离背景遮罩与内容容器的样式，恢复Modal的焦点控制逻辑：

import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';

// ...

<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
  // 仅保留disableAutoFocus（若需自定义焦点逻辑，否则可移除）
  disableAutoFocus
  // 单独配置背景遮罩的样式
  componentsProps={{
    backdrop: {
      sx: {
        backdropFilter: 'blur(5px)',
        backgroundColor: 'rgba(0, 0, 0, 0.7)', // 实现背景变暗效果
      }
    }
  }}
>
  {/* 用Box包裹内容，单独设置内容容器样式 */}
  <Box
    sx={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '75vw',
      height: '85.5vh',
      color: 'white',
      bgcolor: 'black',
      boxShadow: 24,
      border: '10px solid black',
      borderRadius: 4,
      padding: 2 // 可选，避免内容贴边
    }}
  >
    {children}
  </Box>
</Modal>

关键改动说明 #

1. 移除disableEnforceFocus：恢复Modal的焦点锁定机制，阻止底层元素被交互。
2. 使用componentsProps.backdrop：专门为背景遮罩层配置模糊和变暗样式，这是控制Modal背景的正确方式。
3. 用Box包裹内容：将原Modal上的定位、宽高样式移到内容容器中，确保Modal根元素的默认结构不受破坏，背景遮罩层能正常覆盖全屏并响应外部点击关闭事件。

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