title: MaterialUI Custom Hover Style
body: <p>I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do. </p>
  
  <p>Basically, on a table row hover, I want to make it set a background color different from what it is currently doing. </p>
  
  <p>Here is my approach:</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = theme =&gt; ({
    root: {
      width: "100%",
      marginTop: theme.spacing.unit * 3
    },
    table: {
      minWidth: 1020
    },
    tableWrapper: {
      overflowX: "auto"
    },
    hover: {
      "&amp;:hover": {
        backgroundColor: 'rgb(7, 177, 77, 0.42)'
      }
    }
  });
  
  return &lt;TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}&gt;
       {this.insertRow(n, isSelected, counter, checkbox)}
  </code></pre>
  
  <p>;</p>
  
  <pre class="lang-js prettyprint-override"><code>export default withStyles(styles)(EnhancedTable);
  </code></pre>
  
  <p>Thanks for your help!</p>