title: Material UI ListItem Selected Styling in React.js
body: <p>I am using <code>material-ui</code> <code>ListItem</code> to show my nav bar items.  </p>
  
  <p>I wrote the following CSS code to show styling when each item selected.</p>
  
  <pre><code>&lt;List&gt;
    {routes.map(route =&gt; (
      &lt;Link to={route.path} key={route.name} style={{ textDecoration: "none" }}&gt;
        &lt;ListItem button key={route.name} className={classes.listWrap}&gt;
          &lt;ListItemText primary={route.name} className={classes.listItemText} /&gt;
        &lt;/ListItem&gt;
      &lt;/Link&gt;
    ))}
  &lt;/List&gt;;
  
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>listWrap: {
    "&amp;:hover": {
      border: "1px solid #6c757d",
      color: "black"
    },
    textAlign: "center",
    "&amp;:active": {
      background: "#6c757d",
      color: "black"
    }
  }
  </code></pre>
  
  <p><strong>When I select one <code>ListItem</code> the styling doesn't work</strong>  </p>
  
  <p>how can we fix?</p>