如何解决按钮左右对齐时Material UI Menu弹出位置偏移问题

DevOps 小满

2026-9-24

要实现Material UI菜单和右对齐按钮完全右对齐、无多余右侧边距，可按以下步骤调整配置：

调整Menu组件的锚点与自身对齐属性
给Menu组件传入anchorOrigin和transformOrigin属性，将锚点（触发按钮的对齐位置）和菜单自身的对齐位置都设为右侧对齐：
```
anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'right',
}}
transformOrigin={{
  vertical: 'top',
  horizontal: 'right',
}}
```
以上配置的作用是让按钮的右下角和菜单的右上角完全对齐，从根源上避免左侧偏移。

移除菜单默认的右侧边距偏移
Material UI的菜单默认会有8px的边距偏移，可通过sx属性重置菜单容器的右侧边距：

sx={{
  '& .MuiPaper-root': {
    marginRight: 0,
    // 若仍有细微偏移可额外调整 transform 偏移值
    // transform: 'translateX(4px) translateY(8px) !important'
  }
}}

完整的组件示例代码如下：

import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

export default function RightAlignedMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
      <Button
        id="basic-button"
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        右对齐按钮
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        sx={{
          '& .MuiPaper-root': {
            marginRight: 0,
          }
        }}
      >
        <MenuItem onClick={handleClose}>菜单项1</MenuItem>
        <MenuItem onClick={handleClose}>菜单项2</MenuItem>
        <MenuItem onClick={handleClose}>菜单项3</MenuItem>
      </Menu>
    </div>
  );
}

如果使用的是Material UI v4版本，将sx属性替换为classes自定义样式即可，对齐属性的配置逻辑一致。

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