我正在使用 react-table npm module，我想在悬停（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
干杯!
@rishikarri 之前对旧版 React-table 的回答。
就我而言，我在 .scss 中执行此操作
.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
background-color: rgba(247, 247, 247, 0.05) !important;
}
我从这里拿的
可能你已经解决了你的问题
这是一个很好的方法：
const [hoveredRow, setHoveredRow] = useState(null)
return (
<ReactTable
...
getTrProps={(state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
onMouseEnter: (e) => {
setHoveredRow(rowInfo.index)
},
onMouseLeave: (e) => {
setHoveredRow(null)
},
style: {
background: rowInfo.index === hoveredRow ? '#efefef' : 'white',
}
}
} else return {}
}}
)
在事件内部，您可以对状态、rowInfo、样式等进行处理。
请按照此根据 row.value 更新单个单元格颜色
{
Header: () => <div className="text-center font-weight-bold">Status</div>,
accessor: "selectedstatus",
className: "font",
width: 140,
Cell: (row) => (
<div
className="text-center h-6"
style={{ background: row.value === "Selected" ? "green" : "red" }}
>
{row.value}
</div>
),
},