title: Use ButtonBase for ripple effect on Material UI TableRow
body: <p>I'm looking to add a ripple effect to the Material UI Table. I've tried a whole bunch of solutions but none of them quite seem to work perfectly. They all have their own quirks. </p>
  
  <p>I did find <a href="https://stackoverflow.com/questions/29105677/material-ripple-effect-on-table-row">this</a> article, but not much effort was put into a solution. My trials so far seem like they could lead to a possible solution (hopefully)? My table rows either end up being the wrong height (and not taking up multiple columns) or they end up being weirdly centered.. not sure how to handle.</p>
  
  <p><a href="https://codesandbox.io/s/pmry2x11vj" rel="nofollow noreferrer">https://codesandbox.io/s/pmry2x11vj</a></p>
  
  <pre><code>&lt;div className="App"&gt;
    &lt;Router&gt;
      &lt;Grid container&gt;
        &lt;Grid item xs={12}&gt;
          &lt;Card&gt;
            &lt;Table&gt;
              &lt;TableBody&gt;
                &lt;TableRow hover&gt;
                  &lt;TableCell&gt;test&lt;/TableCell&gt;
                  &lt;TableCell&gt;Property&lt;/TableCell&gt;
                &lt;/TableRow&gt;
                &lt;TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{ textDecoration: "none" }}
                &gt;
                  &lt;TableCell&gt;Other&lt;/TableCell&gt;
                  &lt;TableCell&gt;Row&lt;/TableCell&gt;
                &lt;/TableRow&gt;
                &lt;ButtonBase style={{ width: "100%", height: "100%" }}&gt;
                  &lt;TableRow
                    hover
                    component={Link}
                    to={"/"}
                    style={{ textDecoration: "none" }}
                  &gt;
                    &lt;TableCell&gt;row&lt;/TableCell&gt;
                    &lt;TableCell&gt;is weirdly centered&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/ButtonBase&gt;
                &lt;ButtonBase style={{ width: "100%", height: "100%" }}&gt;
                  &lt;TableRow
                    hover
                    component={Link}
                    to={"/"}
                    style={{
                      textDecoration: "none",
                      width: "100%",
                      height: "100%"
                    }}
                  &gt;
                    &lt;TableCell&gt;row&lt;/TableCell&gt;
                    &lt;TableCell&gt;
                      not right height, missing space on right
                    &lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/ButtonBase&gt;
                &lt;TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{
                    textDecoration: "none",
                    width: "100%",
                    height: "100%"
                  }}
                &gt;
                  &lt;ButtonBase style={{ width: "100%", height: "100%" }}&gt;
                    &lt;TableCell&gt;row&lt;/TableCell&gt;
                    &lt;TableCell&gt;
                      not right height, missing space on left / right
                    &lt;/TableCell&gt;
                  &lt;/ButtonBase&gt;
                &lt;/TableRow&gt;
                &lt;TableRow&gt;
                  &lt;TableCell style={{ width: "100%", height: "100%" }}&gt;
                    &lt;ButtonBase style={{ width: "100%", height: "100%" }}&gt;
                      Extra
                    &lt;/ButtonBase&gt;
                  &lt;/TableCell&gt;
                  &lt;TableCell&gt;Normal Row&lt;/TableCell&gt;
                &lt;/TableRow&gt;
                &lt;TableRow&gt;
                  &lt;TableCell&gt;Extra&lt;/TableCell&gt;
                  &lt;TableCell&gt;Normal Row&lt;/TableCell&gt;
                &lt;/TableRow&gt;
              &lt;/TableBody&gt;
            &lt;/Table&gt;
          &lt;/Card&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Router&gt;
  &lt;/div&gt;
  </code></pre>