React MUI：如何让MenuItem随Select滚动时保持固定？

核心原因 #

MUI的Select组件默认会通过Portal把下拉菜单挂载到document.body上，导致页面滚动时，菜单和触发它的Select不在同一滚动上下文里，出现菜单随页面下移、不跟随Select移动的情况。

解决方案 #

通过修改MenuProps，将下拉菜单的挂载目标改为Select的父容器（或直接绑定到Select自身），让菜单和Select处于同一个滚动容器中，滚动时就能同步移动：

代码实现 #

1. 给Select的父容器创建一个ref：

const parentRef = useRef<HTMLDivElement>(null);

2. 在Select的MenuProps中配置container属性，指定菜单挂载到父容器：

<Select
  value={selected}
  onChange={handleChange}
  MenuProps={{
    container: parentRef.current,
    // 可选：调整定位参数，保证菜单位置和默认效果一致
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left"
    },
    transformOrigin: {
      vertical: "top",
      horizontal: "left"
    }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

3. 给父容器添加相对定位，确保菜单基于父容器做定位：

<div ref={parentRef} style={{ position: "relative" }}>
  {/* 放置Select组件 */}
</div>

额外说明 #

• 如果Select本身处于一个自定义滚动容器内，只需把container指定为该滚动容器的ref即可。
• 调整anchorOrigin和transformOrigin是为了避免菜单挂载位置变更后出现偏移，保持和默认下拉效果一致。

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