title: Do nothing on table row hover - How could I do this?
body: <p>I have been trying to disable the row hover for <a href="https://ant.design/components/table/" rel="nofollow noreferrer">antd table</a> (for expandable rows) but no success. I want to disable the hover on all child rows.</p>
  
  <p>Here is a simple table that I am generating using antd.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'antd/dist/antd.css';
  import './index.css';
  import { Table } from 'antd';
  
  const columns = [
      {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
      }
  ];
  
  const data = [
      {
          key: 1,
          name: 'John Brown sr.',
          age: 60,
          address: 'New York No. 1 Lake Park',
          children: [
          {
              key: 11,
              name: 'John Brown',
          },
          {
              key: 12,
              name: 'John Brown jr.'
          },
          {
              key: 13,
              name: 'Jim Green sr.'
          },
          ],
      }
  ];
  
  
  
  ReactDOM.render(
      &lt;Table columns={columns} dataSource={data} /&gt;,
      document.getElementById('container'),
  );
  </code></pre>
  
  <p>Here is the <a href="https://codesandbox.io/s/sleepy-herschel-b2z46" rel="nofollow noreferrer">table fiddle</a> that shows the table, that gets rendered. The CSS that I am trying to apply the change the hover is:</p>
  
  <pre><code>tr.ant-table-row.ant-table-row-level-1:hover {
     background: red;
  }
  </code></pre>
  
  <p>But this does not work. I see a fluctuation of colors between red and blue. How could I do this? </p>
  
  <p>What I mainly want is no hover effect. But I am unable to do this.</p>