1

I would like to change the react material-ui Select MuiList backgroundColor containing the MenuItems.

This is without overriding the styles for all Select and MuiList's. (Changing only the Select name='first' from the below codesandbox.)

I have set the className and tried some classes for the Select element but am unable to see any changes to the MuiList wrapping the MenuItem's.

<Select
  name='tag'
  classes=
    { { 
      'root': 'thinger1',
      'selectMenu': 'thinger2',
      'MuiList': {root:  'thinger3'}
    } }
  onChange={this.handleChange}
  className={[classes.lightGreyBackground].join(' ')}
>

How to override material-ui MenuItem selected background color? This changes only the selected. I would like to change the whole thing.

This is for material-ui 3.9.3.

      <div>
        <TextField select name="first" value={1} fullWidth>
          <MenuItem value={1}>1</MenuItem>
          <MenuItem value={2}>2</MenuItem>
        </TextField>
      </div>

https://y5q03.codesandbox.io/

I am hoping to see the ul MuiList containing the MenuItem's (including the rounded top and bottom padding) backgroundColor #999.

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
user2045517
  • 33
  • 3

2 Answers2

1

If you're doing it like that, you'll have to pass down props all the way to the Menu.

const styles = theme => ({
  menuBg: {
    backgroundColor: "#999" //or whatever you want it to be
  }
});

const YourComponent = props => (
  <TextField select name="first" value={1} fullWidth
    SelectProps={{ 
      MenuProps: {
        classes: { paper: props.classes.menuBg }
      }
    }} 
  >
      <MenuItem value={1}>1</MenuItem>
      <MenuItem value={2}>2</MenuItem>
   </TextField>
);

YourComponent = withStyles(styles)(YourComponent);
Anthony Z
  • 384
  • 2
  • 9
0

For Mui v.5+, I got idea from Anthony Z also can use sx props look link this

SelectProps={{ MenuProps: { sx: '& .MuiPaper-root':{  borderRadius: '6px' } } }}
4RMx
  • 1
  • 1