css - fixed-data-table-2 悬停行背景颜色
问题描述
我一直试图让这个工作一段时间,但我一直没有想出任何东西。fixed-data-table-2 具有用于行 css 的内置功能,但最终被单个单元 css 和包装器覆盖。我一直在做这方面的研究,但我无法提出解决方案。任何帮助将非常感激。
这是我当前的代码,请告诉我需要更改的内容!
import s from './styles.css';
const FilteredCell = function({ data, rowIndex, columnKey, ...props }) {
let output = data[rowIndex][columnKey];
return <Cell {...props}>{output}</Cell>;
};
const rowClassName = () => s.row;
return(
<Table
height={filteredData.length * 30 + 60}
rowsCount={filteredData.length}
rowHeight={30}
width={800}
headerHeight={50}
onRowClick={this.rowClicked}
rowClassNameGetter={rowClassName}
>
<Column
columnKey="chromosome"
width={100}
header={<Cell>Chromosome</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
<Column
columnKey="position"
width={200}
header={<Cell>Position</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
<Column
columnKey="rsid"
width={150}
header={<Cell>RSID</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
<Column
columnKey="gene"
width={100}
header={<Cell>Gene</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
<Column
columnKey="ref_allele"
width={100}
header={<Cell>Reference Allele</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
<Column
columnKey="alt_allele"
width={100}
header={<Cell>Alternative Allele</Cell>}
cell={<FilteredCell data={filteredData} />}
/>
</Table>
)
下面是我当前的 css
.row:hover {
cursor: pointer;
background-color: yellow:
}
我一直在尝试使用我发现的一些建议
.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main
但它似乎没有工作或做任何事情。我不确定现在如何准确加载它。我导出组件的方式是
export default connect(select)(withStyles(s)(ExpectoSnpTable));
解决方案
你发现的这个建议:
.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main
很容易为我工作,而无需使用rowClassNameGetter
,只需导入您需要按照 repo 中的建议导入的 css 模块的修改版本( Fixed Data Table - Github Schrodinger)
dist/fixed-data-table.css
“使用链接标签添加默认样式表或使用 CSS 模块导入它。”
就我而言,不仅仅是做:
import 'fixed-data-table-2/dist/fixed-data-table.css'
例如,我将它复制到我自己的样式文件中,fixed-data-table-2-modified.scss
然后添加:
.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main {
background-color: #fff2d9; transition: all ease 0.5s;
}
然后将其导入为:
import 'fixed-data-table-2-modified.scss'
推荐阅读
- node.js - 更新后无法找到/安装任何 Angular 包
- python - 如何合并边界框以检测一组点?
- android - 安卓动态壁纸触摸事件
- deep-learning - 反向传播算法不适用于感知器
- python - 在 vscode Jupyter Notebook 中使用 head 运行 Selenium
- python - 从数据框中提取行作为列表
- java - 我的代码没有错误消息,但我知道为什么它在控制台中没有显示任何内容,我是 Java 新手,请帮助我
- caddy - 球童:无法识别的指令:uri
- javascript - 点击函数调用在 Playcode 但不是 SquareSpace
- swift - 从自定义框架显示 UIAlertViewController