React-table change style for each row on hover

Question

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'
    }
  }
}}

Answer 1

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
}

I grabbed this from here: https://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

He solves it another way here: http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

Cheers!

Answer 2

previous answer from @rishikarri for old version of React-table.

in my case i do this in .scss

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

i took this from here