fixed-data-table-2 悬停行背景颜色

Posted 2023-02-21

【中文标题】fixed-data-table-2 悬停行背景颜色

【英文标题】：fixed-data-table-2 hover row background color

【发布时间】：2018-10-05 04:55:31

【问题描述】：

我一直在努力让它工作一段时间，但我无法提出任何建议。 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));

【参考方案1】：

您找到的这条建议：

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main

无需使用rowClassNameGetter，只需导入您需要按照 repo (Fixed Data Table - Github Schrodinger) 中的建议导入的 css 模块的修改版本，即可轻松为我工作

"使用链接标签添加默认样式表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'

【参考方案2】：

你只是在你的代码中做复杂的事情，在导入CSS文件时不需要s。

这样您就可以访问所有课程

import './styles.css';

现在您可以使用className 属性应用.row 类

 <Table
            height=filteredData.length * 30 + 60
            rowsCount=filteredData.length
            rowHeight=30
            width=800
            headerHeight=50
            onRowClick=this.rowClicked
            rowClassNameGetter='row'
            className='row' 
          >

删除这个

const rowClassName = () => s.row;

无需使用withStyle

【讨论】：

如果我不使用 const rowClassName getter，rowClassNameGetter 会要求一个函数，我尝试了你推荐的方法，但现在没有加载样式表中的样式。

好吧，我不知道 rowClassNameGetter 的这个属性是什么，如果可能的话尽量不要使用它。

决定只改变每个单元格的背景，当每行使用行内 css 悬停时，无论如何感谢您的帮助！