我使用 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, }} >
我将非常感谢您的帮助！
这是一个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>
);
}
