使用React动态更改按钮颜色

import React, { useState } from 'react';

function App() {
  const [color, setColor] = useState('blue');

  return (
    <button 
      style={{ backgroundColor: color, color: 'white' }}
      onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}
    >
      Click me
    </button>
  );
}

export default App;

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

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

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

export default App;

.active {
  background-color: red;
}

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

const Button = styled.button`
  background-color: ${props => props.color};
  color: white;
`;

function App() {
  const [color, setColor] = useState('blue');

  return (
    <Button 
      color={color}
      onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}
    >
      Click me
    </Button>
  );
}

export default App;