如何将悬停规则添加到css className中，以便在react-table中对悬停时的特定行进行着色？

import './table.css'; // 或者 import styles from './table.module.css';

.table-row:hover {
  background-color: #f5f5f5;
}

<ReactTable
  data={data}
  columns={columns}
  getTrProps={(state, rowInfo) => {
    if (rowInfo && rowInfo.row) {
      return {
        className: rowInfo.index === hoveredRowIndex ? 'table-row' : ''
      };
    }
    return {};
  }}
/>

import React, { useState } from 'react';

function Table() {
  const [hoveredRowIndex, setHoveredRowIndex] = useState(null);

  const handleRowHover = (index) => {
    setHoveredRowIndex(index);
  };

  const handleRowLeave = () => {
    setHoveredRowIndex(null);
  };

  return (
    <ReactTable
      data={data}
      columns={columns}
      getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
          return {
            className: rowInfo.index === hoveredRowIndex ? 'table-row' : '',
            onMouseEnter: () => handleRowHover(rowInfo.index),
            onMouseLeave: handleRowLeave
          };
        }
        return {};
      }}
    />
  );
}