在表格行悬停上什么都不做 - 我怎么能做到这一点？

Question

我一直在尝试禁用antd 表（对于可扩展行）的行悬停，但没有成功。我想禁用所有子行上的悬停。

这是我使用 antd 生成的一个简单表。

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(
    <Table columns={columns} dataSource={data} />,
    document.getElementById('container'),
);

这是显示表格的表格小提琴，它被渲染。我试图应用悬停更改的 CSS 是：

tr.ant-table-row.ant-table-row-level-1:hover {
   background: red;
}

但这不起作用。我看到红色和蓝色之间的颜色波动。我怎么能这样做？

我主要想要的是没有悬停效果。但我无法做到这一点。

Answer 1

尝试这个 ：

.ant-table-tbody > tr.ant-table-row-level-1:hover > td {
  background: unset;
}

那是在你的小提琴上工作。

（background: unset如@ravibagul91 所建议）

Answer 2

这是你可以改变这个效果的地方，

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background: unset; //Change the existing color to `unset`
}