Style Component

相當於利用 className 幫忙加上 class

非原生的

const Card = ({title, content, className}) => {
    return (
        <div className={className}>
            <h1>{title}</h1>
            <p>{content}</p>
        </div>
    )
}

const StyledCard = styled(Card)`
    h1 {
        color: red
    }
`

<StyledCard title="XX" />

原生的

const StyledCard = styled.div`
  h1 {
    color: red;
  }
`;

const Card = ({ title, content }) => {
  return (
    <StyledCard>
      <h1>{title}</h1>
      <p>{content}</p>
    </StyledCard>
  );
};

<Card title="xxx" />;

共通的規則寫在 utils.js 裡 like Breakpoint

export const BREAKPOINTS = {
  sm: 320,
  md: 576,
  lg: 1024,
};