固定數據表2懸停行背景色

Question

我一直在嘗試使它工作一段時間，但我還沒有提出任何建議。 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));

Answer 1

你只是在你的代碼，無需進行絡合事情s導入時CSS文件。

這樣，您將可以訪問所有課程

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

Answer 2

您發現此建議：

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main

無需使用rowClassNameGetter即可輕松地為我工作，而只需按照回購協議中的建議導入需要導入的css模塊的修改版本 （ 固定數據表-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'