当悬停React中的按钮时变暗

import React from 'react';

class Button extends React.Component {
  render() {
    const buttonStyle = {
      backgroundColor: '#e0e0e0',
      padding: '10px',
      borderRadius: '5px',
      color: '#000',
    };

    const buttonHoverStyle = {
      backgroundColor: '#a0a0a0',
    };

    return (
      <button style={buttonStyle} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
        Button
      </button>
    );
  }

  handleMouseOver = () => {
    // 鼠标悬停时，应用悬停样式
    const button = document.querySelector('button');
    button.style.backgroundColor = '#a0a0a0';
  };

  handleMouseOut = () => {
    // 鼠标移出时，恢复默认样式
    const button = document.querySelector('button');
    button.style.backgroundColor = '#e0e0e0';
  };
}

export default Button;