我让它工作的方法是通过设置菜单本身的 prop ，像这样：

<Menu
    id="menu-appbar"
    anchorEl={anchorEl}
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
    transformOrigin={{ vertical: 'top', horizontal: 'center' }}
    open={open}
    onClose={this.handleClose}
    className={props.classes.menu}
  >

定位 prop （anchorOrigin，transformOrigin）来自Popover组件，请参见演示：https://mui.com/material-ui/react-popover/#anchor-playground。
我还必须放入getContentAnchorEl={null}才能让垂直 prop 工作，这是我最终从本期https://github.com/mui/material-ui/issues/7961中学到的。

编辑：getContentAnchorEl prop 在Material UI v5中被移除，不再需要。

当使用状态设置锚元素的属性时，不确定如何做到这一点，但也许这会让您开始。

这就是我的解决方案，希望这能对某人有所帮助。

<Menu
  open={this.state.openProps}
  anchorEl={this.state.anchorEl}
  onClose={onClose}
  className={classes.styles}
  disableAutoFocusItem
  PaperProps={{
    style: {
      left: '50%',
      transform: 'translateX(-77%) translateY(32%)',
    }
  }}
  MenuListProps={{
    style: {
      padding: 0,
    },
  }}
>

Matheus答案中存在错误，anchorEl的类型不是布尔值，在ReactHooks中，它需要是：

const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const [anchorEl, setAnchorEl] = useState()

  const recordButtonPosition = (event: any) => {
      setAnchorEl(event.currentTarget);
      setMenuOpen(true);
  }

  let closeMenu = () => {
      setMenuOpen(false);
  }

  return (
      <React.Fragment>
          <Button onClick={recordButtonPosition}>
              OPEN MENU
          </Button>
          <Menu
              anchorEl={anchorEl}
              open={menuOpen}
              onClose={closeMenu}>
              <MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem> 
          </Menu>
      </React.Fragment>
  );

对我来说，我有问题的跳跃效果，点击后的第一次..我不得不使keepMounted={false}
您可以通过从devTool中调整translateX(10px) translateY(50px)来获得x和y值。

<div>
                         <Menu
                                    id="simple-menu"
                                    anchorEl={anchorEl}
                                    keepMounted={false}
                                    open={Boolean(anchorEl)}
                                    onClose={this.handleClose}
                                    PaperProps={{
                                        style: {
                                            transform: 'translateX(10px) translateY(50px)',
                                        }
                                    }}
                                >
                                    <MenuItem onClick={this.handleClose}>My Account</MenuItem>
                                    <Divider variant="middle"/>
                                    <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                                </Menu>
                            </div>

这是因为您尚未定义锚。

Menu属性-anchorEl负责传递调用它的按钮的位置，这样说并不正确，只是为了易于理解。
这样，每当有点击的时候你都应该参考，我建议你使用React钩子，这会让组件变得干净。

React状态

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)

const handleClick = (event) => {
const anchorEl = event.currentTarget
this.setState({ ...this.state, menuOpen: !menuOpen , anchorEl })

React挂钩

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)

const handleClick = (event) => {
setAnchorEl(event.currentTarget)
}

渲染

return (
 <Menu
   anchorEl={anchorEl}
   open={menuOpen}
   onClose={handleClick }              
 </Menu 
)

实现这一点的一种简单方法是使用useRef挂钩
1.创建引用
1.插入您的引用，如果您想显示菜单，在您的情况下，一个Div或其他
1.在菜单的锚点属性中插入引用
在此输入代码

const inputEl = useRef(null);
<Mycomponent ref={inputEl}/>
<Menu
  id="simple-menu"
  anchorEl={inputEl.current}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>

对我来说这是最简单的方法

在New Material-ui版本5中，我不明白为什么会发生这种奇怪的事情。但是当我在应用程序栏中创建一个单独的菜单组件时，它就工作了。

import * as React from 'react';
import { useRouter } from 'next/router'
import { Menu, IconButton, } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';

export default function AppBarMenu() {
    const router = useRouter()
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const handleLogout = () => {
        localStorage.clear()
        router.push('/auth/login')
    }
    return (
        <>
            <IconButton
                id="basic-button"
                size="large"
                aria-controls="basic-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                <AccountCircle sx={{ color: 'white' }} />
            </IconButton>
            <Menu
                id="basic-menu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                    'aria-labelledby': 'basic-button',
                }}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleLogout}>Logout</MenuItem>
            </Menu>
        </>
    );
}

所有这些东西对我来说都不起作用。所以我给了这个按钮一个id，并使用javascript将其放在菜单上：

<IconButton id="btnPerfil" onClick={this.toggleMenuPerfilOpen}>
    <AccountCircle color="inherit" />
</IconButton>
<Menu
  anchorPosition={{
    vertical: 'top',
    horizontal: 'center'
  }}
  anchorEl={document.getElementById('btnPerfil')}
  keepMounted
  open={this.state.isMenuPerfilOpen}
  onClose={this.toggleMenuPerfilOpen}
>...</Menu>