Change color of Select component's border and arrow icon Material UI

Question

I'm trying to use a Material UI Select component on a dark background:

But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:

const styles = theme => {     root: {        borderBottom: '1px solid white',     },     icon: {        fill: 'white',     }, }  class MyComponent extends React.Component {      render() {         const {classes} = this.props;         return (             <Select                 value={this.props.value}                 inputProps={{                     classes: {                         root: classes.border,                         icon: classes.icon,                     },                 }}             >                 <MenuItem                     value={this.props.value}                 >                     Foo                 </MenuItem>             </Select>            )     } } 

However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.

Answer 1

With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:

const styles = theme => ({     select: {         '&:before': {             borderColor: color,         },         '&:after': {             borderColor: color,         }     },     icon: {         fill: color,     }, });   class MyComponent extends React.Component {      render() {         const {classes} = this.props;         return (             <Select                 value="1"                 className={{classes.select}}                 inputProps={{                     classes: {                         icon: classes.icon,                     },                 }}             >                 <MenuItem value="1"> Foo 1</MenuItem>                 <MenuItem value="2"> Foo 2</MenuItem>             </Select>            )     } } 

Not a very pretty solution to getting the right contrast, but it does the job.

Edit The above answer is missing some code, and is also missing the hover color, as suggested by @Sara Cheatham. See updated hooks based solution:

const useStyles = makeStyles({     select: {         '&:before': {             borderColor: 'white',         },         '&:after': {             borderColor: 'white',         },         '&:not(.Mui-disabled):hover::before': {             borderColor: 'white',         },     },     icon: {         fill: 'white',     },     root: {         color: 'white',     }, })  export const MyComponent = () => {     const classes = useStyles()     return (         <Select             className={classes.select}             inputProps={{                 classes: {                     icon: classes.icon,                     root: classes.root,                 },             }}             value='1'         >             <MenuItem value='1'> Foo 1</MenuItem>             <MenuItem value='2'> Foo 2</MenuItem>         </Select>     ) }