悬停时每行的反应表更改样式 [英] 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屋!