如何使下拉菜单恰好出现在 Material-UI 中的栏下方？

Question

我使用Material-UI创建了一个下拉菜单，我发现有一点很烦人：我想让我的下拉菜单在我点击它的时候出现在它的下方，但每次它都只是覆盖了它（如下图）

有什么办法可以让下拉菜单出现在栏下方？ （不包括Your order标签和号码）

我的代码如下：我尝试修改anchorOrigin属性和transformOrigin属性，但没有成功。

<Menu 
  id="order-menu" 
  anchorEl={anchorEl} 
  keepMounted 
  open={Boolean(anchorEl)}
  onClose={() => setAnchorEl(null)} 
  elevation={20} 
  getContentAnchorEl={null}
  anchorOrigin={{ vertical: "bottom", horizontal: "center", }} 
  transformOrigin={{ vertical: -100, horizontal: 150, }} >        

非常感谢您的帮助！

Answer 1

这是一个将菜单的顶部中心 (transformOrigin) 与按钮的底部中心 (anchorOrigin) 对齐的示例：

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MuiMenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";

const MenuItem = styled(MuiMenuItem)`
  justify-content: flex-end;
`;

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
        transformOrigin={{ horizontal: "center" }}
      >
        <MenuItem onClick={handleClose}>1</MenuItem>
        <MenuItem onClick={handleClose}>2</MenuItem>
        <MenuItem onClick={handleClose}>3</MenuItem>
        <MenuItem onClick={handleClose}>10</MenuItem>
        <MenuItem onClick={handleClose}>20</MenuItem>
        <MenuItem onClick={handleClose}>300</MenuItem>
      </Menu>
    </div>
  );
}

相关文档：https://material-ui.com/api/popover/#props