Question

是否可以使用CSS来更改MultiGrid组件中悬停时的行背景颜色？如我所见，行级没有div。所有单元格处于同一级别。表组件具有 rowClassName 属性，而MultiGrid没有

Answer 1

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

它在内部使用MultiGrid。

根据您的用例，您可以直接使用它，也可以复制它处理悬停的方式，即它使用一个函数来计算单元格是否应该具有悬停效果，然后对其应用特定的样式。您无需手动应用：hover选择器，只需编辑该样式即可。

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;
 }

Answer 3

通过获取下一个和上一个元素的兄弟元素并添加一个“行悬停”类名解决了这个问题。

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>
// )

React虚拟化的MultiGrid行-悬停CSS

3 个答案: