styled-component 언제 prop를 써야하나?


const Headline = styled.h1`
  color: ${(props) => props.color};
`;

const Text = styled.span`
  padding: 10px;

  &.invalid {
    text-decoration: line-through;
  }
`;

const Content = ({ title, isStrikeThrough, color, children }) => {
  return (
    <Section>
      <Headlinecolor={color}>{title}</Headline>

      <TextclassName={cs({ invalid: isStrikeThrough })}>
        {children}
      </Text>
    </Section>
  );
};

The last example clearly shows how a team of developers could distinguish when to use a CSS class and when to use a React prop. A CSS class can always be used when it's either always there or when it can be toggled with a boolean flag. Beyond this, if something cannot be defined by a CSS class, like the color, one can use a prop for it.