在react应用程序中将样式属性动态添加到css类

import React, { useState } from 'react';

const Button = () => {
  const [isActive, setIsActive] = useState(false);

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

  const buttonStyle = {
    backgroundColor: isActive ? 'red' : 'blue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px',
  };

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

export default Button;

.active {
  background-color: red;
  color: white;
}

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

const Button = () => {
  const [isActive, setIsActive] = useState(false);

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

  const buttonClassName = isActive ? styles.active : '';

  return (
    <button className={buttonClassName} onClick={handleClick}>
      Click me
    </button>
  );
};

export default Button;