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

Question

一段时间以来，我一直在努力让它发挥作用，但我一直无法想出任何办法。固定数据-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));

Answer 1

您只是在代码中进行复杂化处理，导入 CSS 文件时无需 s。

这样您就可以访问所有 classes

import './styles.css';

现在您可以使用 className 属性申请 .row class

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

No need to use withStyle

Answer 2

您找到的建议：

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main

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

"Add the default style-sheet dist/fixed-data-table.css using a link tag or import it with a CSS module."

在我的例子中，而不是仅仅做：

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'

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

fixed-data-table-2 hover row background color

css

reactjs

fixed-data-table