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

在React中动态更改按钮样式可以通过多种方式实现，以下是几种常见的方法：

方法一：内联样式

你可以直接在JSX中使用内联样式，并通过状态来动态改变样式。

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;

方法二：CSS类名

你可以定义多个CSS类，并通过状态来切换这些类名。

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;

Button.css

.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;
}

方法三：使用CSS-in-JS库

你可以使用一些流行的CSS-in-JS库，如styled-components或emotion，来动态更改样式。

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;