How to add hover rule to css className in order to color specific row on hover in react-table?

Question

I have successfully applied classname and added color to specific row in my react-table. But I cannot add hover rule to this className to apply another color when I hover over the row. How to apply hover rule to add hover effect? Thanks in advance!

Here is my code:

<ReactTable>
...

getTrProps={(state, rowInfo, column, instance) => {

        let className = '';
        if(rowInfo && rowInfo.original){
          if(highlightedCerts.includes(rowInfo.original.id)){
            className = ' highlightedCertRow';
          }
          else if(rowInfo.original.isRevoked) {
            className = ' revokedCertRow';
          }
          else if(rowInfo.original.blocked) {
            className = ' blockedCertRow';
          }
        }
     return {
      ...
     className: className,
     ...
     };
/>

Answer 1

Replace green color with its rgb code, if green code is 0,127,252 , then use .highlightedCertRow:hover { background-color: rgba(0,127,252, 0.3) !important; } .highlightedCertRow:hover { background-color: rgba(0,127,252, 0.3) !important; } .

Answer 2

I have solved it on my own. There was a little mistake with nesting tags in css.