如何在React中动态更改按钮样式？

import React, { useState } from 'react';

function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  const toggleButtonStyle = () => {
    setIsActive(!isActive);
  };

  const buttonStyle = {
    backgroundColor: isActive ? 'blue' : 'grey',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    cursor: 'pointer'
  };

  return (
    <button style={buttonStyle} onClick={toggleButtonStyle}>
      Click me
    </button>
  );
}

export default DynamicButton;

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

function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  const toggleButtonStyle = () => {
    setIsActive(!isActive);
  };

  return (
    <button className={isActive ? 'active' : 'inactive'} onClick={toggleButtonStyle}>
      Click me
    </button>
  );
}

export default DynamicButton;

.active {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.inactive {
  background-color: grey;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

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

const Button = styled.button`
  background-color: ${props => props.isActive ? 'blue' : 'grey'};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  const toggleButtonStyle = () => {
    setIsActive(!isActive);
  };

  return (
    <Button isActive={isActive} onClick={toggleButtonStyle}>
      Click me
    </Button>
  );
}

export default DynamicButton;