'Material UI Select focus and selected background color
I have Select component and MenuItems inside it and I want to remove or override background color from focused Select component and selected MenuItem.
Selected MenuItem has this background color:
And after I select item Select component has focus which looks like this:
Here is my Select component and MenuItem inside it:
<Select
classes={{ focused: classes.selected }}
>
<MenuItem
classes={{ selected: classes.selected }}
>
Never
</MenuItem>
</Select>
and I'm just tried to override background color to be same as normally:
focused: {
backgroundColor: "#fff",
},
selected: {
backgroundColor: "#fff",
},
Any tips how to remove or override those background colors? Select component doesn't have to keep it's focus after option is selected.
EDIT: Found out where focused appears and I'm pretty sure I need to target it via inputProps but don't know how:
Solution 1:[1]
After read your suggestion, I added :focus to the global theme in my App.js file, like that:
MuiSelect: {
outlined: {
'&:focus': {
backgroundColor: '#FFF'
}
}
},
Thanks!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Rafael Schettino |



