How to change background color of a selected ItemList Material-Ui
Change default selected gray color by passing selected
style like this.
<ListItem
button
selected={true}
classes={{ selected: classes.active }}>
<ListItemText primary={item.name} />
</ListItem>
Style object should be like this.
active: {
backgroundColor: "red"
}
In your Higher Order Component add new property selectedItemStyle!
<ComposedComponent selectedItemStyle={selectedItemStyle} value={this.state.selectedIndex} onChange={this.handleRequestChange} containerHeight={this.props.containerHeight} elementHeight={40}>
{this.props.children}
</ComposedComponent>
where selectedItemStyle is
const slectedItemStyle = {
backgroundColor: 'red'
}
I had to use Global Theme override: https://material-ui.com/customization/components/#global-theme-override
const muiTheme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&$selected": {
backgroundColor: "red",
"&:hover": {
backgroundColor: "orange",
},
},
},
button: {
"&:hover": {
backgroundColor: "yellow",
},
},
},
},
});