0

私はこれをしばらくの間機能させようとしてきましたが、何も思いつきませんでした。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));
4

2 に答える 2