Material UI巨型菜单加Slide过渡后关闭页面无法交互求助

1. 禁用Menu的模态背景 #

Material UI的Menu默认会渲染一个模态背景，菜单关闭的过渡动画期间，这个背景可能依然存在并挡住页面交互。可以直接禁用背景：

<Menu
  id="Company-options"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  disableBackdrop={true} // 移除模态背景
  // 其他属性保留
>

2. 关闭滚动锁定 #

Menu默认打开时会锁定页面滚动，过渡动画可能导致锁定状态未及时解除，手动关闭该功能：

<Menu
  // 其他属性保留
  disableScrollLock={true}
>

3. 修正Paper的定位逻辑 #

移除自定义的position: absolute，改用Menu默认的定位机制，避免层级或元素覆盖问题：

PaperProps={{
  sx: {
    width: "100vw", 
    height: "50%",
    backgroundColor: '#f4f4f4',
    marginTop: '2px',
    zIndex: 1300,   
    // 删除 position: absolute
  }
}}

4. 优化过渡组件配置 #

给Slide组件加上mountOnEnter，配合unmountOnExit确保组件在过渡前后正确挂载/卸载：

TransitionComponent={(props) => (
  <Slide 
    direction='down' 
    unmountOnExit={true} 
    mountOnEnter={true}
    {...props} 
  />
)}

完整修正代码示例 #

const Header = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    // 此处保留你的Header其他结构
    <Menu
      id="Company-options"
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
      disableBackdrop={true}
      disableScrollLock={true}
      TransitionComponent={(props) => (
        <Slide 
          direction='down' 
          unmountOnExit={true} 
          mountOnEnter={true}
          {...props} 
        />
      )}
      MenuListProps={{
        'aria-labelledby': 'Company-Button',
      }}
      PaperProps={{
        sx: {
          width: "100vw", 
          height: "50%",
          backgroundColor: '#f4f4f4',
          marginTop: '2px',
          zIndex: 1300,   
        }
      }}
    >
      {/* 菜单内容 */}
    </Menu>
  );
};

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