CODEWITHSUNDEEP
reactjsmaterial-ui
Travis Heeter
Travis Heeter

Reputation: 14054

How to change the dropdown backgroundColor of an MUI 5 TextField select?

enter image description here

As you can see from the image above, the background color of the dropdown needs to be changed. I'd like to change the white to black.

Here's my code:

const styles={ 
  textField:{
    '& .MuiPopover-paper':{
      backgroundColor: 'black'
    }
  }
}

...

<TextField select id='version' label='Version' variant='outlined' sx={styles.textField}>
  <MenuItem value={10}>1</MenuItem>
  <MenuItem value={20}>2</MenuItem>
  <MenuItem value={30}>3</MenuItem>
</TextField>

I have tried many variations of '.MuiPopover-paper' none seem to work.

Upvotes: 0

Views: 781

Answers (1)

sm3sher
sm3sher

Reputation: 3350

If you want to style the underlying menu you can pass in SelectProps to the TextField.

<TextField
  select
  id="version"
  label="Version"
  variant="outlined"
  SelectProps={{
    MenuProps: {
      sx: styles.textField,
    },
  }}
>

I changed the styles object accordingly:

const styles = {
  textField: {
    ".MuiList-root": {
      backgroundColor: "lightblue",
    },
  },
};

Upvotes: 1

Related Questions