Material UI Select组件下拉菜单未显示在输入框下方如何解决

我在使用Material UI的Select组件时遇到了下拉菜单位置异常的问题。

预期效果 #

实际运行效果 #

打开下拉菜单时的显示状态

问题表现为下拉菜单未显示在对应输入框下方，反而显示在输入框中心位置。我查阅资料得知Material UI Select组件默认将下拉菜单展示在输入框下方，但该默认规则在我的项目中未生效。

相关代码 #

<div className="row-5" style={{ marginTop: "21px" }}>
    <div className="repeat">
        <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
            <InputLabel id="repeat-id">Repeat</InputLabel>
            <Select
                style={{ width: '420px' }}
                labelId="repeat-id"
                id="demo-simple-select-standard"
                // value={age}
                // onChange={handleChange}
                label="Repeat"
                defaultValue="Never"
            >
                <MenuItem value="Never">
                    Never
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
        </FormControl>
    </div>
</div>

该问题通常由定位配置异常、样式冲突或版本bug导致，可按以下方案逐一修复：

• 手动指定菜单定位规则
  给Select组件添加MenuProps属性，强制指定下拉菜单的锚定位置，修改后的Select代码如下：

  <Select
    style={{ width: '420px' }}
    labelId="repeat-id"
    id="demo-simple-select-standard"
    label="Repeat"
    defaultValue="Never"
    // 新增定位配置
    MenuProps={{
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      transformOrigin: {
        vertical: 'top',
        horizontal: 'left'
      }
    }}
  >
    {/* 原有菜单项内容保持不变 */}
  </Select>
  

  anchorOrigin定义菜单相对于输入框的锚点位置，transformOrigin定义菜单自身的对齐起点，上述配置可强制菜单对齐到输入框左下角的下方位置，符合默认预期效果。
• 排查全局样式冲突
  检查项目全局样式中是否对.MuiMenu-paper、.MuiPopover-paper等MUI内置类名设置了position、transform、margin相关的强制样式，这类样式会覆盖组件默认定位逻辑，导致位置偏移。如果存在冲突样式，可通过自定义类名提高优先级覆盖，或者缩小全局样式的作用范围。
• 检查父容器样式
  检查代码中.row-5、.repeat等Select父容器是否设置了transform: translate()、position: fixed、overflow: hidden这类属性，这类属性会改变定位元素的父级上下文，导致Popover定位计算出错。如果存在这类属性，可调整父容器样式，或者给MenuProps添加disablePortal={true}配置，让菜单渲染在当前父容器内适配定位上下文。
• 升级MUI稳定版本
  如果你使用的是MUI v5早期版本，部分组件内置定位逻辑存在bug，可升级到v5.10.0以上的稳定版本，即可直接修复官方自带的定位问题。

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