我一直在尝试禁用antd table的行悬停(可扩展行),但没有成功。我想禁用所有子行的悬停。
下面是我使用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'),
);
这是table fiddle显示的表格,它被渲染了。我尝试应用的CSS是:
tr.ant-table-row.ant-table-row-level-1:hover {
background: red;
}
但是这不起作用,我看到红色和蓝色之间的颜色波动,我怎么能做到呢?
我主要想要的是没有悬停效果。但是我做不到。
5条答案
按热度按时间rqcrx0a61#
试试这个:
你在练小提琴。
(
background: unset
根据@ravibagul91的建议)cgh8pdjw2#
您可以在此处更改此效果,
nue99wik3#
公认的答案对我不起作用,如果其他人有这个问题,这是我如何修复它:
首先,将Table组件中的className属性设置为某个值,例如如下所示的“time-table-row-select”:
然后在CSS中添加以下内容:
或者,如果使用scroll参数,则需要使用以下命令:
因为根据你使用表的方式,似乎还有一些额外的警告,我将通过我的逻辑来说明如何找出使用哪个类选择器(因为似乎大多数Web开发stackoverflow的人都不这样做&这令人难以置信的沮丧):
找到为表组件提供的类的位置,然后将每个后续子标记附加到选择器,直到到达tbody后面的tr标记,向其添加:hover,然后向其添加〉td
ohtdti5x4#
如果要使用Less覆盖其他主题变量,只需将此行添加到变量覆盖文件中。
@table-row-hover-bg: unset;
您也可以将 unset 更改为您想要在此处设置的任何其他颜色。
w6mmgewl5#
这为我关闭了行突出显示悬停。