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

Question

我正在使用react-table npm模块，我想更改悬停（onMouseEnter）上的行的样式。我在他们的文档中找到了下面的选项，该选项可以为所有行设置样式，但是我想为悬停中的每一行设置样式（尝试使用onMouseEnter并给出样式），但是并没有接受。有什么建议么！

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

Answer 1

我会尝试使用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

干杯!