Question

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

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

Answer 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

干杯！

Answer 2

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

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

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

我从 here

Answer 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，样式等操作。

Answer 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>
  ),
},

悬停时每行的React-table更改样式

4 个答案: