如何在按钮左下角制作 Material UI 菜单下拉菜单

Question

I hope you guys are doing well: This is my code sandbox: https://codesandbox.io/s/hungry-agnesi-vn6039?file=/demo.tsx

I currently want to have the Material UI menu drop down below starting at the exact bottom left of the button. However, as visible in my code sandbox, the menu starts a little bit right of the desired spot I want. Is there a way for me to start the dropdown menu at the bottom left of the button? I really appreciate any responses!

Thanks!

Answer 1

Give you button a little margin from left.

Answer 2

You can add negative marginLeft in your dropdown like this. Here is the working codesandbox

      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
        style={{ // Add here you negative margin
          marginLeft: "-8px"
        }}
      >

Let me know if it helps and if is ok for you to add the inline style. Or you can do the same by using a styled component.