When using the Native Select from Material-UI if you use the dark theme then the select dropdown has white text on a white background.
This is seen on the component demo page too when in dark mode:
Can you change the dropdown background color without changing the actual select background color?
Edit: This has been logged as an issue: https://github.com/mui-org/material-ui/issues/14337
UPDATE As of version 3.9.2, this issue has been fixed in Material-UI so the workaround below is no longer necessary.
This should probably be fixed in Material-UI, but you can fix it in a particular use case with the following:
Use the theme to specify the option background color (see How to change select box option background color?):
const styles = theme => ({
select: {
"& option": {
background: theme.palette.background.paper
}
}
});
And then use that class on the select:
<Select native className={classes.select}>
Here's a modified version of the demo using this:
It obviously something that should fixed in the package.
However, I found out that it happends only when using native <option> tag. This code if from the problematic demo of theirs:
<Select
native
value={this.state.age}
onChange={this.handleChange('age')}
inputProps={{
name: 'age',
id: 'age-native-simple',
}}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Select>
So you have two options:
You can style the option with css and ovveride the background or the fontcolor to anything you want.
You can use another component in material-ui that works well with inverted situations, which they used in another demo. (Using MenuItem), like this:
<Select
multiple
value={this.state.name}
onChange={this.handleChange}
input={<Input id="select-multiple-checkbox" />}
renderValue={selected => selected.join(', ')}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem key={name} value={name}>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
