I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example:
Component
return <div>
<FormControl variant="outlined" className={classes.root}>
<InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
Plan
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>dsnfsdjfnsduifn</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Style
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(1),
minWidth: 120,
color: 'white',
borderColor: 'white'
},}));
Given my app's design requirements, I need to change the color of this dropdown menu to white. Currently, the component appears as shown in the following image:
https://i.stack.imgur.com/gteAF.jpg
Looking at the component code, it is outlined. Referring to the documentation (https://material-ui.com/api/select/), it seems that I need to override the .MuiSelect-outlined class, but I am unsure about how to achieve this. The documentation only covers styling simple buttons and does not provide guidance on customizing more complex components like this one. I would appreciate if someone could demonstrate an example of how to change the color of the outline, text, and arrow to white.