I am trying to apply the following styles to the ul that appears once the button is clicked:

 &.MuiList-root {
    padding-top: 0px;
    padding-bottom: 0px;
  }

Here is a live sandbox where problem is illustrated:

https://codesandbox.io/s/react-typescript-forked-tyd8n8?file=/src/App.tsx

CodePudding user response：

According to the posted sandbox, the styles are attached to CustomMenuItem which is the list items. To target the list and remove the padding, consider to style the Menu instead, with the sx prop (or create a custom component with styled):

Forked live with modification: codesandbox

<Menu
  {...bindMenu(popupState)}
  sx={{
    "& .MuiList-root": {
      py: "0px",
    },
  }}
>
  <CustomMenuItem
    onClick={() => {
      console.log("hello");
      popupState.close();
    }}
  >
    label
  </CustomMenuItem>
</Menu>