Реакция - Как настроить выпадающее меню в интерфейсе выбора материала

Question

У меня проблема с Выберите Компонент из пользовательского интерфейса материала, проблема, которую он по-разному отображает в Chrome на Windows, а не на Mac.

на Mac, работает нормально, нов окнах см. прикрепленное изображение

обратите внимание, если я уберу флаг native, он будет работать, но мне нравится, как его средство визуализации в качестве нативного выбора

вот пример кода codeSandbox

https://codesandbox.io/s/yvq524yv8z

вот пример кода

const styles = theme => ({
  dropdownStyle: {
    backgroundColor: "lightgray" --> this change I need to make 
  }
});


<Select
          native
          value={value}
          onChange={this.handleChange("value")}
          name="value"
          variant="filled"
          classes={{
            root: classes.selectEmpty,
            select: classes.select
          }}
          MenuProps={{ classes: { paper: classes.dropdownStyle } }}
        >
          {contracts.map((contractItem, index) => {
            return (
              <option key={contractItem.agent_id} value={index}>
                {contractItem.carrier}
              </option>
            );
          })}
        </Select>

Answer 1

Вы должны переопределить backgroundColor <option>: https://codesandbox.io/s/509n6o1v1l

Вы можете взглянуть на реализацию, чтобы взглянуть на правило CSS, которое нужно переопределить: https://github.com/mui-org/material-ui/blob/10b9d6aef53d20ba4e368f40c9acbb7b05c5c855/packages/material-ui/src/NativeSelect/NativeSelect.js#L48-L50