React - How to customize drop downmenu in Select Material UI

Question

I face an issue with Select Component from Material UI, the issue it renders in a diferent way in chrome on windows rather than mac.

on mac, it works just fine but in windows see image attached

note if I remove native flag it will be working but I like how its renderer as native select

here is sample on codeSandbox

https://codesandbox.io/s/yvq524yv8z

here is the code sample

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

You have to override the <option>'s backgroundColor: https://codesandbox.io/s/509n6o1v1l

You can look at the implementation to look at the CSS rule you need to override: https://github.com/mui-org/material-ui/blob/10b9d6aef53d20ba4e368f40c9acbb7b05c5c855/packages/material-ui/src/NativeSelect/NativeSelect.js#L48-L50