:hover和:focus内联样式在React中不起作用

const styles = {
  container: {
    backgroundColor: 'blue',
    color: 'white',
    // 其他样式属性
  }
};

function MyComponent() {
  return <div style={styles.container}>Hello World</div>;
}

function MyComponent() {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  const containerStyle = {
    backgroundColor: isHovered ? 'red' : 'blue',
    color: 'white',
    // 其他样式属性
  };

  return (
    <div
      style={containerStyle}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      Hello World
    </div>
  );
}