MUI v5 如何将Select组件的下拉选项定位在组件上方

问题场景 #

• 需求：将MUI(v5)版本Select组件的下拉选项弹层，整体定位在Select输入组件本身的上方，选项数量为动态生成、高度不固定。
• 默认写法下，弹层默认展示在Select组件下方，初始代码如下：

<Select ... >
  <MenuItem ... >Menu 1</MenuItem>
  <MenuItem ... >Menu 2</MenuItem>
  <MenuItem ... >Menu 3</MenuItem>
</Select>

• 首次尝试仅修改MenuProps内的anchorOrigin配置，将vertical值设为'top'、horizontal值设为'center'，代码如下：

<Select 
  ...
  MenuProps={{
    anchorOrigin: {
      vertical: 'top',
      horizontal: 'center',
  }}
>
  <MenuItem ... >Menu 1</MenuItem>
  <MenuItem ... >Menu 2</MenuItem>
  <MenuItem ... >Menu 3</MenuItem>
</Select>

• 上述写法的实际渲染效果为下拉弹层顶部与Select组件顶部对齐，不符合预期。预期效果为下拉弹层整体位于Select组件上方，弹层底部与Select组件顶部对齐。
• 此前考虑过通过MenuProps -> PaperProps -> style -> transform手动设置固定偏移量实现定位，但由于选项数量动态变化，弹层高度不固定，固定偏移值无法适配所有场景。

可行实现方案 #

你只需要在MenuProps中同时配置anchorOrigin和transformOrigin两个定位属性即可，不需要手动计算偏移值，底层会自动适配弹层动态高度，完美适配动态选项场景，实现代码如下：

<Select
  // 保留原有业务属性
  MenuProps={{
    anchorOrigin: {
      vertical: 'top', // 锚点位置选在Select组件的顶部边缘
      horizontal: 'center',
    },
    transformOrigin: {
      vertical: 'bottom', // 弹层自身的对齐点选在弹层的底部边缘
      horizontal: 'center',
    },
  }}
>
  <MenuItem value={1}>Menu 1</MenuItem>
  <MenuItem value={2}>Menu 2</MenuItem>
  <MenuItem value={3}>Menu 3</MenuItem>
  {/* 此处动态渲染任意数量的MenuItem都可自动适配定位 */}
</Select>

实现原理说明 #

MUI Select的下拉弹层底层基于Popper.js实现定位逻辑：anchorOrigin定义的是锚点元素（即Select组件本身）上的对齐基准位置，transformOrigin定义的是下拉弹层自身的对齐基准位置。两个属性配合使用时，弹层渲染时会自动测量自身实际高度完成对齐，完全不受选项数量动态变化导致的高度波动影响。
如果需要调整水平对齐规则，只需要同步修改两个配置中的horizontal值即可：同时设为'left'为左对齐，同时设为'right'为右对齐。

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