动态更改样式，在React中重新渲染时无需重置

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'red'};
  color: white;
  padding: 10px 20px;
`;

const MyComponent = () => {
  const [isPrimary, setIsPrimary] = useState(false);

  const handleClick = () => {
    setIsPrimary(!isPrimary);
  };

  return (
    <StyledButton primary={isPrimary} onClick={handleClick}>
      Click me
    </StyledButton>
  );
};

import React, { useState } from 'react';

const MyComponent = () => {
  const [isPrimary, setIsPrimary] = useState(false);

  const handleClick = () => {
    setIsPrimary(!isPrimary);
  };

  const buttonStyle = {
    backgroundColor: isPrimary ? 'blue' : 'red',
    color: 'white',
    padding: '10px 20px',
  };

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