在表行悬停时什么都不做 \- 我该怎么做？

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;
}

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

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

原文由 Amanda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个 ：

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

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

（ background: unset 如@ravibagul91 所建议）

原文由 adesurirey 发布，翻译遵循 CC BY-SA 4.0 许可协议

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`
}

原文由 ravibagul91 发布，翻译遵循 CC BY-SA 4.0 许可协议