悬停时每行的反应表更改样式 [英] React-table change style for each row on hover

问题描述

我正在使用 react-table npm 模块，我想在悬停时更改行的样式(onMouseEnter).我在他们的文档中找到了以下选项，它可以为所有行设置样式，但我想在悬停时设置每一行的样式，我尝试使用 onMouseEnter 并提供样式，但它没有采用.任何建议！

I'm using react-table npm module, I want to change the style of a row on hover(onMouseEnter). I found the below option in their documentation which lets style all the rows, but I want to style each row on hover I tried using onMouseEnter and give the styling but it isn't taking that. Any suggestions!

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

推荐答案

我会尝试使用 CSS 解决这个问题.下面的例子:

I would try solving this using CSS. Example below:

.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

He solves it another way here: http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

干杯！

这篇关于悬停时每行的反应表更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！