Реактивизированная строка MultiGrid - hover css

Question

Можно ли использовать CSS для изменения цвета фона строки при наведении курсора в компоненте MultiGrid?Как я вижу, на уровне строк нет div.Все клетки находятся на одном уровне.Для компонента Table есть свойство rowClassName , но не для MultiGrid

Answer 1

Вы можете добавить имя класса в ячейки и затем использовать чистый 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;
 }

Answer 2

Взгляните на https://github.com/techniq/mui-virtualized-table/

Он использует MultiGrid для внутреннего использования.

В зависимости от вашего варианта использования, вы можете использовать его напрямую или скопировать способ работы с зависанием,то есть он использует функцию для вычисления того, должен ли ячейка иметь эффект наведения, а затем применяет к ней определенный стиль.Вам никогда не нужно применять: зависать селекторы вручную, просто отредактируйте этот стиль.