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