如何设置Material UI菜单在按钮左下角精准展开下拉？

要实现菜单从按钮左下角精准向下展开，只需调整Menu组件的anchorOrigin和transformOrigin属性即可：

• 设置anchorOrigin指定锚点位置为按钮的左下角：

  anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
  

• 设置transformOrigin指定菜单自身的左上角对齐锚点，确保菜单从锚点向下展开：

  transformOrigin={{ vertical: 'top', horizontal: 'left' }}
  

将这两个属性添加到你的Menu组件中，示例代码如下：

<Menu
  id="demo-positioned-menu"
  aria-labelledby="demo-positioned-button"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
  transformOrigin={{ vertical: 'top', horizontal: 'left' }}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

如果调整后仍存在偏移，可检查按钮是否有额外的内边距或外边距，通过自定义样式修正按钮的定位基准；必要时可给Menu添加disablePortal属性，确保菜单严格跟随按钮位置渲染。

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