React-virtualized MultiGrid row - hover css

Взгляните на https://github.com/techniq/mui-виртуализированная-таблица/

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

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

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

Решил это, получив следующих и предыдущих братьев и сестер элементов и добавив имя класса "row-hover".

const CLASSNAME = 'row-hover';

const hoverLeftSide = (e, shouldHover) => {
    const prevEl = e.previousElementSibling;
    const prevInSameRow = prevEl && e.style.top === prevEl.style.top;

    if (prevInSameRow) {
        if (shouldHover) {
            prevEl.classList.add(CLASSNAME);
        } else {
            prevEl.classList.remove(CLASSNAME);
        }
    
        hoverLeftSide(prevEl, shouldHover);
    }

}

const hoverRightSide = (e, shouldHover) => {
    const nextEl = e.nextElementSibling;
    const nextInSameRow = nextEl && e.style.top === nextEl.style.top;

    if (nextInSameRow) {
        if (shouldHover) {
            nextEl.classList.add(CLASSNAME);
        } else {
            nextEl.classList.remove(CLASSNAME);
        }
    
        hoverRightSide(nextEl, shouldHover);
    }
}

const hoverRow = (e, shouldHover) => {
    if (shouldHover) {
        e.currentTarget.classList.add(CLASSNAME);
    } else {
        e.currentTarget.classList.remove(CLASSNAME);
    }

    hoverLeftSide(e.currentTarget, shouldHover);
    hoverRightSide(e.currentTarget, shouldHover);
}

export default hoverRow;

// import hoverRow from './hoverRow';
//
// return (
//     <div
//         onMouseOver = {(e) => hoverRow(e, true)}
//         onMouseOut = {(e) => hoverRow(e, false)}
//     >
//         {children}
//     </div>
// )