React-virtualized MultiGrid row - 悬停css

Question

是否可以使用CSS在悬停MultiGrid组件时更改行背景颜色？正如我所看到的那样，行级别上没有div。所有细胞都处于同一水平。 Table组件有rowClassName属性，但不适用于MultiGrid

Answer 1

看看https://github.com/techniq/mui-virtualized-table/

它在内部使用MultiGrid。

根据您的使用情况，您可以直接使用它，也可以复制它处理悬停的方式，即它使用一个函数来计算单元格是否应该具有悬停效果，然后将特定样式应用于它。您永远不需要申请：手动悬停选择器，只需编辑该样式。

Answer 2

您可以为单元格添加类名，然后使用纯css。例如：

<MultiGrid  
     {...this.state}
     ref={this.grid}
     cellRenderer={_cellRenderer}
     columnWidth={_getColumnWidth}
     columnCount={rows[0].length}
     height={1024}
     rowHeight={_getColumnHeight}
     rowCount={rows.length}
     width={width}
     styleTopRightGrid={STYLE_TOP_RIGHT_GRID}/>

如您所见，MultiGrid使用_cellRenderer，它是：

const _cellRenderer = ({columnIndex, key, rowIndex, style}) => {
    return(
             <div className="cell">
                 {row[rowIndex][columnIndex]}
             </div>
    );
})

在你的CSS中你可以添加：

.cell:hover {
    background-color: yellow;
 }