React MUI下拉菜单在持久化侧边Drawer中无法正常显示选项列表求助

问题现象 #

在持久化的Material-UI侧边Drawer中集成下拉选择菜单时，出现以下异常：

• Drawer处于打开状态时，点击下拉菜单无法看到选项列表
• 关闭Drawer后，下拉菜单的选项列表会出现在Drawer原来位置的后方

复现步骤 #

1. 点击菜单按钮打开侧边Drawer
2. 尝试触发Drawer内的下拉选择菜单
3. 关闭Drawer后可看到之前未显示的选项列表

解决方案 #

核心问题是MUI Select组件的下拉菜单默认通过Portal挂载到document.body上，导致层级与Drawer冲突。推荐通过以下方式修复：

给Select组件添加MenuProps配置，禁用Portal，让下拉菜单直接挂载在Drawer内部DOM结构中：

<Select
  value={selectedValue}
  onChange={handleChange}
  // 其他原有属性
  MenuProps={{
    PopperProps: {
      disablePortal: true,
    },
  }}
>
  <MenuItem value="option1">选项1</MenuItem>
  <MenuItem value="option2">选项2</MenuItem>
  <MenuItem value="option3">选项3</MenuItem>
</Select>

原理说明 #

MUI Select的下拉菜单默认使用Portal将DOM节点插入到body中，而Drawer自身带有层级（z-index），导致挂载在body上的下拉菜单被Drawer遮挡。设置disablePortal: true后，下拉菜单会作为Drawer的子元素存在，自然继承Drawer的层级，不会再出现遮挡或错位问题。

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