React中MUI Modal组件点击外部不关闭的实现方法咨询

要实现你需要的效果，调整Modal的几个核心属性即可，具体修改方案如下：

1. 允许外部元素交互 #

MUI Modal默认会强制焦点锁定在内部区域，同时锁定背景滚动，要解除这两个限制，需添加以下属性：

• disableEnforceFocus={true}：取消强制焦点锁定，让Modal外部的按钮、输入框能正常被点击和交互
• disableAutoFocus={true}：禁止Modal自动将焦点移到内部元素，确保外部元素可以正常获取焦点
• disableScrollLock={true}（可选）：如果需要允许背景区域滚动，加上这个属性

2. 点击外部不关闭Modal #

默认情况下，点击Backdrop（背景层）或按ESC键会触发onClose关闭Modal，要修改这个行为：

• 把onClose设为空函数，阻止默认的ESC/外部点击触发关闭逻辑，仅在Modal内部的关闭按钮调用真正的关闭函数
• 如果保留Backdrop，将BackdropProps里的onClick设为空函数，避免点击背景层触发关闭；如果不需要背景层，直接设置backdrop="false"即可

修改后的完整代码示例 #

import Modal from '@mui/material/Modal';
import Backdrop from '@mui/material/Backdrop';
import { useState } from 'react';

function CustomModal() {
  const [open, setOpen] = useState(false);
  // 仅在内部关闭按钮调用这个关闭函数
  const handleInternalClose = () => setOpen(false);

  return (
    <>
      {/* 外部可交互的按钮示例 */}
      <button onClick={() => setOpen(true)}>打开Modal</button>
      <input placeholder="外部输入框" />

      <Modal
        open={open}
        onClose={() => {}} // 空函数，阻止默认关闭触发
        disableEnforceFocus={true}
        disableAutoFocus={true}
        disableScrollLock={true} // 可选，根据需求决定是否保留
        BackdropComponent={Backdrop}
        BackdropProps={{
          onClick: () => {}, // 点击背景层不执行关闭
          sx: { backgroundColor: 'rgba(0,0,0,0.2)' } // 背景层样式示例
        }}
      >
        {/* Modal内部内容 */}
        <div style={{ 
          padding: '2rem', 
          backgroundColor: '#fff',
          margin: '10vh auto',
          maxWidth: '400px'
        }}>
          <h3>自定义Modal</h3>
          <p>此时外部按钮和输入框可正常交互</p>
          <button onClick={handleInternalClose}>关闭Modal</button>
        </div>
      </Modal>
    </>
  );
}

export default CustomModal;

补充说明 #

• 如果你不需要显示背景层，直接移除BackdropComponent和BackdropProps，添加backdrop="false"属性即可，这样点击Modal外部空白区域也不会触发关闭
• disableEnforceFocus和disableAutoFocus必须同时设置，才能确保外部元素完全可交互

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