javascript - 悬停时每行的 react 表更改样式

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

干杯!