Why doesn't the style in my PaperProps within the MenuProps of my Select apply to the select

user_19080275 0
Viewed 64

The white padding in this select won't disappear and I feel like I've tried 30 variations and places to make the css stop showing up. Any advice? This is using MUI 5, and I even tried basing it off of this code, where the styling I applied works, so what could be wrong?

Code sandbox with my code here

enter image description here

material-ui reactjs frontend css javascript
1 Answers

It appears you are using a TextField with a select prop at your base while trying to target the MenuProps directly. The TextField API does not have a MenuProps but it does have SelectProps. Try moving your props into that like so (which worked for me using your sandbox):

<StyledTextInput
  select
  defaultValue={"None"}
  displayEmpty
  SelectProps={{
    MenuProps: {
      PaperProps: {
        sx: {
          ".MuiList-root": {
            paddingTop: "0",
            paddingBottom: "0"
          }
        }
      }
    }
  }}
user_12150210
Related