[ListItem] Custom background color always has overridden by MUI style

[Rombs]

When I'm trying override background color of root node for ListItem( the attribute selected = {true}), MUI is overriding it by default class from theme (theme.palette.action.selected).
I'd like to know is it normal behaviour or is it a bug (I has fixed it in my local repo and can make pull request)?
Thx

• [v] This is not a v0.x issue.
• [v] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I'd like that background color of ListItem was 'red'.

Current Behavior 😯

The background color of ListItem is 'rgba(0, 0, 0, 0.14)'.

Steps to Reproduce 🕹

import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
  root: {
  },
  selected: {
    backgroundColor: 'red',
  },
})

function Demo(props) {
  const { classes } = props
  return (
    <List component="nav">
      <ListItem selected={true}
        classes={{
          selected: classes.selected
      }}>
        TEST
      </ListItem>
    </List>
  )
}

export default withStyles(styles)(Demo)

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.5.1
React	16.6.3
Browser	Chrome, Safari
TypeScript	No
etc.

[oliviertassinari]

@Rombs The correct solution is the following:

import React from "react";
import { List, ListItem, withStyles } from "@material-ui/core";

const StyledListItem = withStyles({
  root: {
    backgroundColor: "blue",
    "&.Mui-selected": {
      backgroundColor: "red"
    }
  },
})(ListItem);

function Demo() {
  return (
    <List component="nav">
      <StyledListItem>default</StyledListItem>
      <StyledListItem selected>selected pseudo-class</StyledListItem>
    </List>
  );
}

export default Demo;

https://codesandbox.io/s/pk5w045pp7?file=/src/demo.js

You can learn more in https://material-ui.com/customization/components/#pseudo-classes.

[rofrol]

That worked for me to also change background color when on no-hover device:

import { withStyles, ListItem as MuiListItem } from '@material-ui/core'

export const ListItem = withStyles({
  root: {
    backgroundColor: '#fafafa',
    '&:not(:last-child)': {
      borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
    },
    '@media (hover: none)': {
      '&:hover': {
        backgroundColor: '#fafafa',
      },
    },
  },
})(MuiListItem)

[JamieShelley]

import { List, ListItem, withStyles } from "@material-ui/core";

*withStyles-> now resides in : import { withStyles } from '@mui/styles';