按钮中的悬停效果不适用于react中的css模块

import React from 'react';

const Button = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    transition: 'background-color 0.3s',
    ':hover': {
      backgroundColor: 'red',
    },
  };

  return <button style={buttonStyle}>Button</button>;
};

export default Button;

import React from 'react';
import { Hover } from 'react-hover';

const Button = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    transition: 'background-color 0.3s',
  };

  const hoverOptions = {
    hover: true,
  };

  return (
    <Hover options={hoverOptions}>
      <Hover.Trigger>
        <button style={buttonStyle}>Button</button>
      </Hover.Trigger>
      <Hover.Hover>
        <button style={{ ...buttonStyle, backgroundColor: 'red' }}>Button</button>
      </Hover.Hover>
    </Hover>
  );
};

export default Button;