score:3

Accepted answer 
const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360
  },
  icon: {
    color: 'red',
  }
});
export default function List(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List component="nav">
        <ListItem button>
          <ListItemIcon className={classes.icon}>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItem>
      </List>
    </div>
  );
}

Here is an article about it (className use-related).

score:0

According to the documentation you can override the style of the component with a rule name of the classes object prop.

Here is the answer with an example: https://github.com/mui-org/material-ui/issues/12023

score:0 

const useStyles = makeStyles({
 listItem: {
    '&:hover': {
      backgroundColor: theme.palette.primary.light,
      color: theme.palette.primary.main,
      '& .MuiListItemIcon-root': {
        color: theme.palette.primary.main,
      },
    },
  },
})

Related Query

More Query from same tag