title: Change hover color on Table Rows in Ant-Design Table
body: <p>I am trying to set the background color on rows when the mouse is hovering them, I tried a few approaches, one with styled components, styling the table itself:</p>
  <pre><code>const StyledTable = styled((props) =&gt; &lt;Table {...props} /&gt;)`
    &amp; tbody &gt; tr:hover {
      background: rgba(224, 248, 232, 1);
    }
  `;
  </code></pre>
  <p>This almost works, when I hover over a row, first I see the color that I have set, and immediatelly after that it changes back to the default, so its transitioning between my light green and the default antd color. I can't even find their color when I inspect the rows in the stylings.</p>
  <p>The second way that I tried is with normal css and a class name:</p>
  
  <p>Where the css for the class is:</p>
  <pre><code>.custom-row-hover:hover {
    background-color: rgba(224, 248, 232, 1);
  }
  </code></pre>
  <p>And the result is the same, again, first my color and then transitions to the default one.</p>