如何动态改变组件的样式？

import React, { useState } from 'react';

const MyComponent = () => {
  const [color, setColor] = useState('red');

  const handleClick = () => {
    setColor('blue');
  };

  return (
    <div>
      <button onClick={handleClick}>Change Color</button>
      <div style={{ color }}>Hello, World!</div>
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import './MyComponent.css';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const handleClick = () => {
    setIsHighlighted(!isHighlighted);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Highlight</button>
      <<div className={isHighlighted ? 'highlighted' : ''}>Hello, World!</div>
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  color: ${props => props.color};
`;

const MyComponent = () => {
  const [color, setColor] = useState('red');

  const handleClick = () => {
    setColor('blue');
  };

  return (
    <div>
      <button onClick={handleClick}>Change Color</button>
      <StyledDiv color={color}>Hello, World!</StyledDiv>
    </div>
  );
};

export default MyComponent;