如何让Material UI中Menu内的Autocomplete Popper突破父容器限制

问题分析 #

Menu组件默认配置了overflow: hidden和position: relative，导致内部Autocomplete的Popper被容器范围限制，仅提升z-index无法突破这种上下文约束，核心要让Popper脱离Menu的容器层级。

解决方案 #

通过修改Autocomplete的Popper挂载目标与定位逻辑，实现Popper不受Menu容器限制：

1. 自定义Popper挂载到全局根节点
   给Autocomplete的PopperComponent传入自定义组件，指定container={document.body}，让Popper直接挂载到body下，脱离Menu的容器范围：

<Autocomplete
  // 保留原有属性
  PopperComponent={({ children, ...props }) => (
    <Popper {...props} container={document.body} positionFixed={false}>
      {children}
    </Popper>
  )}
/>

2. 调整Menu的溢出样式（可选）
   给Menu添加overflow: visible样式，避免Menu本身遮挡Popper：

<Menu
  // 保留原有属性
  sx={{ overflow: 'visible' }}
>
  {/* 内部内容 */}
</Menu>

原理说明 #

• 将Popper挂载到body后，它不再受Menu的overflow属性约束，能根据视窗空间自由调整显示位置。
• 关闭positionFixed是为了保证Popper基于Autocomplete的位置进行正确相对定位，避免出现偏移。

内容的提问来源于stack exchange，提问作者tw.C4444