Material UI的Menu组件如何正确使用transformOrigin调整弹出位置

报错原因 #

transformOrigin属性的vertical字段为枚举类型，仅支持'top'、'center'、'bottom'三个固定字符串值，传入自定义数值、其他格式内容都会触发类型错误或渲染异常，不能直接通过修改该字段实现自定义像素偏移。
你当前默认vertical:'bottom'的效果如下：

解决方案 #

你可以根据需求选择以下两种实现方式：

• 方案1：内置枚举值粗调
  仅需要大范围向上移动实现覆盖效果时，直接把transformOrigin.vertical改为'top'即可，修改后菜单的顶部会和锚点元素的底部对齐，相比原配置整体向上移动相当于菜单自身高度的距离，修改后的核心配置如下：

  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "center",
    }}
    transformOrigin={{
      vertical: "top", // 仅修改这一行即可
      horizontal: "center",
    }}
    {...props}
    style={{ fontSize: "1.3rem" }}
  />
  

• 方案2：自定义样式做像素级微调
  需要精准控制偏移量时，直接在withStyles的paper样式中添加Y轴偏移覆盖默认定位即可，比如需要向上移动8px就设置translateY(-8px)，向下移动就填正值，完整修改后的代码如下：

  const StyledMenu = withStyles({
    paper: {
      border: "1px solid #FFFFFF",
      boxShadow:
        "0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2)",
      borderRadius: "0px",
      fontSize: "1.3rem",
      // 新增以下行，数值根据你的需求调整
      transform: "translateY(-8px) !important",
    },
    list: {
      fontSize: "1.3rem",
    },
  })((props: MenuProps) => (
    <Menu
      elevation={0}
      getContentAnchorEl={null}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "center",
      }}
      transformOrigin={{
        vertical: "bottom",
        horizontal: "center",
      }}
      {...props}
      style={{ fontSize: "1.3rem" }}
    />
  ));
  

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