悬停时每行的反应表更改样式答案

【问题标题】：React-table change style for each row on hover悬停时每行的反应表更改样式
【发布时间】：2017-09-17 05:47:36
【问题描述】：

我正在使用 react-table npm 模块，我想在悬停（onMouseEnter）上更改行的样式。我在他们的文档中找到了以下选项，它可以设置所有行的样式，但是我想在悬停时设置每一行的样式，我尝试使用 onMouseEnter 并给出样式，但它没有采用。有什么建议！

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

【问题讨论】：

您是否尝试过onMouseOver 事件在那里获取rowInfo.age，然后将其与您的静态值进行比较？

标签： javascript reactjs redux

【解决方案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

干杯！

【讨论】：

关于 react-table getTrProps 的问题。

【解决方案2】：

@rishikarri 先前对旧版本 React-table 的回答。

在我的情况下，我在 .scss 中执行此操作

  .ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    background-color: rgba(247, 247, 247, 0.05) !important;
  }

我从 here

【讨论】：

【解决方案3】：

你的问题可能已经解决了

这是个好方法：

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、样式等进行操作。

【讨论】：

【解决方案4】：

请按照此操作根据 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>
  ),
},

【讨论】：