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

Question

我使用 Material-UI 创建了一个下拉菜单，但发现一件烦人的事情:我想让我的下拉菜单在单击时出现在栏下方，但每次它都只是覆盖栏(如图以下)


有什么办法可以让下拉菜单出现在栏下方？ (不包括 Your order 标签和数字)
我的代码如下:我尝试修改anchorOrigin属性(property)和transformOrigin属性(property)，但它没有工作。

<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