Material UI - Multiple css classes on global theme - css

Question

I'm using Material UI with React for the first time. I want to change my global theme, but what I want to change has two classes:
.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
background-color: rgba(0, 0, 0, 0.08);
}
How can I select them with createMuiTheme? I've tried this:
createMuiTheme({
overrides: {
MuiListItem: {
root: {
Mui: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
},
},
}
})
Thank you in advance

Answer 1

Here's the correct syntax:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&.Mui-selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});
It is also equivalent to do:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&$selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});

Answer 2

Just try this code
createMuiTheme({
overrides: {
MuiListItem: {
root: {
'&$selected': {
backgroundColor: "black"
},
'&$selected:hover'{
backgroundColor: "blue"
}
},
},
},
})
and look to this response

Answer 3

Material UI adds the global Mui-selected classes to make it easier to change specific elements globally.
However, you should just be targeting the MuiListItem classes according to the docs like so:
createMuiTheme({
overrides: {
MuiListItem: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
}
})
I see that this doesn't work anymore in the current version of Material UI. In the source code of the ListItem component, it is now defined like so:
root: {
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
...
}