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

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.

[oliviertassinari]

With v4.0.0-beta.1 you can do:

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

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

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

export default Demo;

https://codesandbox.io/s/xwor26oqo

cc @iossocket @ShogunRoss @iwknow @chpinan1128 @ndibek @jay-almaraz @HorizonShadow @TidyIQ I would love to learn more what would be a great solution for you guys.