如何调整MUI 5中Select组件内置Popover的位置？

API 探路者

2026-7-6

直接上最简洁的官方方案：通过Select的MenuProps传递anchorOrigin和transformOrigin属性，就能直接控制内部Popover的显示位置，完全不需要复杂的样式hack。

示例代码：

import { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

function RightAlignedSelect() {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <Select
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
      placeholder="选择选项"
      MenuProps={{
        // 设置Popover相对于Select的锚点位置
        anchorOrigin: {
          vertical: 'center',
          horizontal: 'right',
        },
        // 设置Popover自身的对齐点
        transformOrigin: {
          vertical: 'center',
          horizontal: 'left',
        },
      }}
    >
      <MenuItem value="opt1">选项1</MenuItem>
      <MenuItem value="opt2">选项2</MenuItem>
      <MenuItem value="opt3">选项3</MenuItem>
    </Select>
  );
}

export default RightAlignedSelect;

补充说明你的误区和其他疑问：

你之前以为Select没提供传递定位属性的API，但实际上MenuProps可以接收Menu组件的所有属性，而Menu内部会把anchorOrigin、transformOrigin直接传给它创建的Popover，这是官方支持的标准用法。
关于classes属性：MUI v5并没有废弃classes，只是不再推荐@mui/styles的makeStyles，现在更推荐用styled组件或sx prop做样式。不过这个场景下完全不需要用样式覆盖，属性配置更可靠。
Popover确实通过Portal挂载在DOM顶层，所以给Select加子元素样式无效，这个判断是对的，但属性配置的方式不受DOM结构影响。
用ref加setTimeout调整位置属于hack，会有跳动问题，完全没必要，官方属性已经能满足需求。