MUI Select组件弹窗打开后页面无法交互的解决方案咨询

• 升级MUI到最新稳定版
  这类弹窗锁定页面的问题多为版本bug，优先确认当前使用的MUI版本是否过时。升级到官方最新稳定版（v5.x系列的最新迭代版）通常能修复此类兼容性问题。执行以下命令完成升级：

  # npm 用户
  npm update @mui/material @emotion/react @emotion/styled
  # yarn 用户
  yarn upgrade @mui/material @emotion/react @emotion/styled
  

• 关闭默认滚动锁定
  MUI Select组件默认会在弹窗打开时给body添加overflow: hidden来锁定页面滚动。如果不需要这个行为，直接开启disableScrollLock属性即可：

  <Select
    disableScrollLock={true}
    // 其他组件属性
  >
    {/* 下拉选项 */}
  </Select>
  

  开启后弹窗打开时页面可正常滚动，且不影响弹窗交互。

• 自定义弹窗挂载容器
  若上述方法无效，可将弹窗挂载到自定义DOM容器中，避免全局样式干扰：

  import { Portal } from '@mui/material';
  
  const CustomPopper = ({ children }) => (
    <Portal container={document.getElementById('custom-select-container')}>
      {children}
    </Portal>
  );
  
  // 使用自定义容器的Select
  <Select
    PopperComponent={CustomPopper}
    // 其他组件属性
  >
    {/* 下拉选项 */}
  </Select>
  

  需提前在页面中添加对应容器：<div id="custom-select-container"></div>，弹窗会被局部挂载，减少对全局页面的影响。

• 排查全局样式冲突
  检查项目全局CSS是否存在强制锁定页面的规则（如给body/html设置position: fixed、overflow: hidden），或是自定义z-index导致弹窗被遮挡。通过浏览器开发者工具查看元素样式，定位冲突规则后调整即可。

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