Как сделать так, чтобы раскрывающееся меню отображалось точно под полосой в Material-UI?

Question

Я создал раскрывающееся меню с помощью Material-UI, и меня раздражает одна вещь: я хочу, чтобы мое раскрывающееся меню появлялось под полосой, когда я щелкаю по ней, но каждый раз, когда оно закрывает панель ( как на изображении ниже)

Is there any way I can do to let the drop-down menu appear below the bar? (not covering the Your order label and the number)

My codes are as below: I try to modify the anchorOrigin property and transformOrigin property but it didn't work.

<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>
  );
}

Related documentation: https://material-ui.com/api/popover/#props