gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 05:09:35 26 4
gpt4 key购买 nike

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

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

最佳答案

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

干杯!

关于javascript - 悬停时每行的 react 表更改样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43522127/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com