table-hover (引导)不适用于react

import styles from './Table.module.css';

function Table() {
  return (
    <table>
      <tbody>
        <tr className={styles['table-hover']}>
          <td>Row 1</td>
        </tr>
        <tr className={styles['table-hover']}>
          <td>Row 2</td>
        </tr>
      </tbody>
    </table>
  );
}

import React, { useState } from 'react';

function Table() {
  const [hoveredRow, setHoveredRow] = useState(null);

  const handleMouseEnter = (index) => {
    setHoveredRow(index);
  };

  const handleMouseLeave = () => {
    setHoveredRow(null);
  };

  return (
    <table>
      <tbody>
        <tr
          style={{ backgroundColor: hoveredRow === 0 ? 'lightgray' : 'white' }}
          onMouseEnter={() => handleMouseEnter(0)}
          onMouseLeave={handleMouseLeave}
        >
          <td>Row 1</td>
        </tr>
        <tr
          style={{ backgroundColor: hoveredRow === 1 ? 'lightgray' : 'white' }}
          onMouseEnter={() => handleMouseEnter(1)}
          onMouseLeave={handleMouseLeave}
        >
          <td>Row 2</td>
        </tr>
      </tbody>
    </table>
  );
}