4. styled-components

설치

npm i styled-components
npm i -D @types/styled-components @swc/plugin-styled-components

.swcrc 파일

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

Styled Component 만들기

import styled from 'styled-components';

const Paragraph = styled.p`
  color: #00F;
`;

export default function Greeting() {
  return (
    <Paragraph>
      Hello, world!
    </Paragraph>
  );
}

Styled Component를 베이스로 다른 Styled Component 만들기

스타일을 추가한 다른 Styled Component를 만들 수 있음

import styled from 'styled-components';

const Paragraph = styled.p`
  color: #00F;
`;

const BigParagraph = styled(Paragraph)`
  font-size: 5rem;
`;

export default function Greeting() {
  return (
    <BigParagraph>
      Hello, world!
    </BigParagraph>
  );
}

일반 컴포넌트를 베이스로 Styled Component 만들기

기존 컴포넌트에 className을 잡아줘야하는 것에 주의

import styled from 'styled-components';

function HelloWorld({ className }: React.HTMLAttributes<HTMLElement>) {
  return (
    <p className={className}>
      Hello, world!
    </p>
  );
}

const Greeting = styled(HelloWorld)`
  color: #00F;
`;

export default Greeting;