Изменение backgroundColor реакции mateial-ui Выберите MuiList

Я хотел бы изменить реагирующий материал-пользовательский интерфейс. Выберите фоновый цвет MuiList, содержащий элементы меню.

Это без переопределения стилей для всех Select и MuiList. (Изменение только Select name='first' из приведенных ниже кодов и поля.)

Я установил className и попробовал некоторые классы для элемента Select, но не могу увидеть никаких изменений в MuiList, обертывающих MenuItem.

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

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

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

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

javascript reactjs material-ui

29.05.2019 03:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 060

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Спасибо! Я действительно хотел использовать Select, поэтому передал следующее, чтобы добиться того же. ``` <Select MenuProps = {{classes: { paper: class.darkBackground2 }}} ```

— 29.05.2019 04:15

29.05.2019 03:53