style-component-managed.js

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${({ isActive }) => (isActive ? 'green' : 'gray')};
`;

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

  return (
    <div>
      <Button onClick={() => setIsActive(!isActive)} isActive={isActive}>
        click me
      </Button>
    </div>
  );
};