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:
to change the bg of the focused Select
component target the root
class using classes
prop and add :hover
styles.
<Select classes={{ root: classes.selectRoot }}>
{... menuitems}
</Select>
const useStyles = makeStyles((theme) => ({
selectRoot: {
//...other styles
'&:focus':{
backgroundColor:'yellow'
}
}
}));
And for changing the bg of the selected MenuItem
, something similar needs to be done. For this target the selected
and root
class of the MenuItem
.
<MenuItem
classes={{ selected: classes.selected, root: classes.rootMenuItem }}
value={"1"}>
Never
</MenuItem>
const useStyles = makeStyles((theme) => ({
selected: {
},
rootMenuItem: {
"&$selected": {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
},
'&:hover':{
backgroundColor:'blue'
}
}
}));
Another way of styling MenuItem
:-
Giving the classes classes={{ selected: classes.selected, root: classes.rootMenuItem }}
to every ListItem
is not preferable it'll increase the code repetition and also violets some clean code rules (if followed). So to overcome this create a custom listItem using withStyles
.
const CustomMenuItem = withStyles((theme) =>createStyles({
root:{
"&$selected": {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
},
'&:hover':{
backgroundColor:'blue'
}
},
selected:{
}
})
)(MenuItem);
Now use this CustomMenuItem
in place of ListItem
.
<Select classes={{ root: classes.selectRoot }}>
<CustomMenuItem value={"1"}>Never1</CustomMenuItem>
<CustomMenuItem value={"2"}>Never2</CustomMenuItem>
<CustomMenuItem value={"3"}>Never3</CustomMenuItem>
</Select>
Note:- I've added random background colors here.