Question

我想更改反应材质-ui选择包含MenuItems的MuiList backgroundColor。

这不会覆盖所有Select和MuiList的样式。（从下面的代码和框中仅更改Select name ='first'。）

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

<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的ul MuiList（包括圆形的顶部和底部填充）backgroundColor＃999。

Answer 1

如果您要那样做，则必须将道具一直传递到菜单。

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

更改react mateial-ui的backgroundColor选择MuiList

1 个答案: