How to make the Material UI menu dropdown at the bottom left of the button

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

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.

[UPDATE] If you want to apply it in general you can use the theme (which I don't recommend unless you are sure about it) and override the MuiPopover component like this.

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  components: {
    MuiPopover: {
      styleOverrides: {
        paper: {
          marginLeft: '-8px'
        }
      }
    }
  },
});