javascript - 更改reactmaterial-ui的背景颜色选择Mui列表

Question

我想更改包含 MenuItems 的 react Material -ui 选择 MuiList 背景颜色。

这不会覆盖所有 Select 和 MuiList 的样式。 (仅更改以下代码和框中的 Select name='first'。)

我已经设置了 className 并尝试了 Select 元素的一些类，但无法看到包装 MenuItem 的 MuiList 的任何更改。

<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?这仅更改选定的。我想改变这一切。

这适用于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/

我希望看到包含 MenuItem 的(包括圆形顶部和底部填充)backgroundColor #999 的 ul MuiList。

Answer 1

如果您这样做，则必须将 Prop 一直传递到菜单。

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);