悬停表上的每一行的反应表更改样式

我正在使用react-table npm模块，我想更改悬停（onMouseEnter）上的一行样式。我在他们的文档中找到了下面的选项，它允许样式化所有行，但是我想在悬停时对每一行进行样式设置，我尝试使用onMouseEnter并给出了样式，但它没有采用该样式。有什么建议么！悬停表上的每一行的反应表更改样式

getTrProps={(state, rowInfo, column) => { 
    return { 
    style: { 
     background: rowInfo.age > 20 ? 'green' : 'red' 
    } 
    } 
}}

来源

2017-04-20 kay

我会尝试解决这个使用CSS。下面的例子：

.ReactTable .rt-tr .action { 
    transition: all .2s ease 
    text-align: center 
    color: red 
    transform: scale(0) 
} 

.ReactTable .rt-tr:hover .action { 
    transform: scale(1.3) 
} 

.ReactTable .rt-tr:hover .rt-td { 
    background: yellow 
}

我抓住这个从这里：https://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

他解决了在这里的另一种方法：http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

干杯！

来源

2017-09-29 14:27:49 rishikarri

悬停表上的每一行的反应表更改样式

回答

相关问题