Изменение фонаЦвет реагирующего интерфейса Выберите MuiList - PullRequest
Новая
       24

Изменение фонаЦвет реагирующего интерфейса Выберите MuiList

0 голосов
/ 29 мая 2019

Я хотел бы изменить реагирующий материал. Пользовательский интерфейс Select MuiList backgroundColor, содержащий элементы MenuIms.

Это без переопределения стилей для всех 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(' ')}>

Как переопределить Material-UI MenuItem выбранного цвета фона? Это изменяет только выбранный.Я хотел бы изменить все это.

Это для материала 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/

Я надеюсь увидеть ульMuiList, содержащий элемент MenuItem (включая закругленные верхнюю и нижнюю отступы) backgroundColor # 999.

1 Ответ

0 голосов
/ 29 мая 2019

Если вы делаете это таким образом, вам придется передавать реквизиты до самого меню. 

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