如何实现Material UI Select菜单打开时仍可交互页面其他元素？

问题核心是Material UI的Select组件默认使用模态模式的Menu，会生成一个隐形backdrop阻止页面交互。要实现类似Uber导航栏下拉菜单的效果，可通过以下可靠方法禁用该限制：

方法一：通过MenuProps关闭模态模式（适用于v4及v5版本） #

Select组件内部依赖Menu组件，可通过MenuProps传递配置，关闭Menu的模态行为并移除backdrop：

<Select
  value={selectedValue}
  onChange={handleChange}
  // 核心配置
  MenuProps={{
    modal: false, // 关闭模态模式，移除阻止交互的backdrop
    disableBackdropClick: true, // 可选：点击页面其他区域不自动关闭菜单，按需开启
    sx: { zIndex: 1000 } // 可选：确保菜单层级高于其他元素，避免被遮挡
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

关键参数说明： #

• modal: false：彻底关闭Menu的模态特性，不再生成阻止交互的隐形backdrop，页面其他元素可正常响应点击、hover及滚动。
• disableBackdropClick: true：如果需要保持菜单展开状态（直到用户主动点击菜单外或选择选项），可开启此参数；若希望点击外部自动关闭菜单，可省略该参数。
• sx: { zIndex: 1000 }：根据页面元素的层级调整数值，确保菜单不会被其他内容遮挡。

方法二：Material UI v5专属的slotProps配置 #

v5版本支持更简洁的slotProps语法，直接针对menu插槽配置：

<Select
  value={selectedValue}
  onChange={handleChange}
  slotProps={{
    menu: {
      modal: false,
      disableBackdropClick: true,
      sx: { zIndex: 1000 }
    }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

额外注意事项 #

• 若菜单出现定位偏移或被截断，可通过调整Popper的修饰符修正：

  MenuProps={{
    modal: false,
    PopperProps: {
      modifiers: [
        {
          name: 'preventOverflow',
          options: {
            padding: 16 // 调整菜单与视口边距，避免被截断
          }
        }
      ]
    }
  }}
  

• 测试时需覆盖不同屏幕尺寸，确保菜单展开后页面所有交互行为正常。

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