Usando props no styled-components

props-styled-componet.jsx

//https://codesandbox.io/s/propsstyled-components-rph5f

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

const MyComponent = props => {
  const [expanded, setExpanded] = useState(false);
  function handleExpandClick(event) {
    setExpanded(!expanded);
  }

  return (
    <Fragment>
      <button onClick={event => handleExpandClick(event)}>CallToAction</button>
      <Icone expanded={expanded}> > </Icone>
    </Fragment>
  );
};

export default MyComponent;

const Icone = styled.div`
  transition: all 0.2s linear;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: ${props => (props.expanded ? "red" : "blue")};
  transform: ${props =>
    props.expanded ? " rotate(180deg) scale(1)" : "rotate(0deg) scale(0.9)"};
`;