How to to style dropdown menu in material-ui select component, I want to be able to change the default color of that menu but using "&:not([multiple]) option": {background: "yellow"} is not working, and also to push down the drop menu since it goes on the the top of label ?

CodePudding user response：

Just to summarize and provide a solution to the issue from the comments.

NativeSelect is using the browser's default select element. For example, check out how this looks on different browsers.

The solution would be to use the Select component in Material UI.

You mention the issue is that the menu appears over the top of the component making it not so desirable. To fix that you can add to the MenuProps prop of the Select component.

MenuProps={{
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left"
  },
  transformOrigin: {
    vertical: "top",
    horizontal: "left"
  },
  getContentAnchorEl: null
}}

Here we are saying the top left of the popup menu, should anchor to the bottom left of the select component. The documentation lacks for this trick...

Check it out here.

getContentAnchorEl: null is required although I can't tell you much about it. Hopefully, someone reading this can let us know.