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>

Please provide a CodeSandbox that reproduces your issue. It would also be helpful to see the image of what it looks like when it is working (e.g. on Mac). — Ryan Cogswell
– Ryan Cogswell, Commented May 10, 2019 at 21:24
I have edited my question after add codeSandbox link hosted my question — Mina Fawzy
– Mina Fawzy, Commented May 10, 2019 at 23:20

Josh Wooding · Accepted Answer · 2019-05-11 15:49:55Z

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

Collectives™ on Stack Overflow

React - How to customize drop downmenu in Select Material UI

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related