title: How to change the styles of ListItem element with the "onclick" event?
body: <p>My goal is when I click on a ListItem, it should change the <code>background-color</code> and <code>text: "line-through"</code>. And then, if I click again, these changes should be canceled.<br>
  But it happens very strangely for me. I just can't understand why <code>ListItem</code> changes <code>background-color</code> only after I click to any place of the window? And why text into ListItem becomes crossed out only after I move pointer beyond the element</p>
  
  <pre><code>const styles = () =&gt; ({
    listItem: {
      borderRadius: "1em"
    },
  
    listItemDone: {
      borderRadius: "1em",
      backgroundColor: "#F6F6E8",
      textDecoration: "line-through"
    },
  
    iconButton: {
      padding: 5
    },
  
    important: {
      color: "#00ACE9",
      fontWeight: "bold"
    }
  });
  
  class TodoListItem extends Component {
    state = {
      done: false
    };
  
    onClickItem = () =&gt; {
      this.setState({
        done: !this.state.done
      });
    };
  
    render() {
      const { label, important = false, classes } = this.props;
      const { done } = this.state;
  
      return (
        &lt;ListItem
          onClick={this.onClickItem}
          className={done ? classes.listItemDone : classes.listItem}
          button
          divider
        &gt;
          &lt;ListItemText
            primary={label}
            classes={{ primary: important ? classes.important : "" }}
          /&gt;
        &lt;/ListItem&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/v8ojkj2qzy" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit v8ojkj2qzy"></a></p>