React中Material UI Menu定位问题：如何将触发按钮移至父元素右侧

问题原因 #

你当前的定位不生效是因为设置了position: absolute后仅配置marginRight无效，绝对定位元素需要通过left/right/top/bottom属性指定相对于最近的非static定位父元素的位置，单独设置margin不会触发绝对定位的位置偏移。

解决方法 #

1. 调整按钮靠右定位

修改按钮的style配置，把marginRight: "18px"替换为right: "18px"，如果你需要按钮固定在视口右侧不随页面滚动，也可以把position改为fixed，同时可加top属性调整垂直位置：

style={{
  background: "#FFFFFF",
  border: "1px solid #787878",
  color: "#000000",
  position: "absolute",
  right: "18px", // 替换原来的marginRight属性
  // 可选：调整垂直位置，比如距离顶部20px
  top: "20px",
  width: "147px",
  height: "40px",
}}

如果需要按钮相对于当前组件的外层容器靠右，需要给组件最外层的div加上position: relative属性：

return (
  <div style={{position: 'relative'}}>
    {/* 原有按钮和菜单代码 */}
  </div>
)

2. 同步调整菜单弹出位置（可选，避免超出屏幕）

按钮移动到右侧后，原有菜单的居中弹出逻辑可能会导致菜单超出右侧视口，可修改StyledMenu的定位配置，让菜单从按钮右下角弹出：

const StyledMenu = withStyles({
  paper: {
    border: "1px solid #d3d4d5",
  },
})((props: MenuProps) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "right", // 锚点改为按钮右下角
    }}
    transformOrigin={{
      vertical: "top",
      horizontal: "right", // 菜单右上角对齐锚点
    }}
    {...props}
  />
));

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