[짤막글] styled-components는 어떻게 스타일을 적용하는가

TL:DR; className을 사용한다

공식 예제에 가보면 이런 예시가 있다.

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

리액트 라우터 돔의 Link처럼 생각할 수 있다고 한다.

실제로 아래와 같이 동작한다.

위의 코드를 codeSandbox에 붙여넣고 className만 삭제하면 동작하지 않는다.

즉, styled-components는

• 클래스명을 해시로 만들고,
• 해당 클래스를 포함한 스타일 시트를 돔에 삽입하고
• 해당 클래스명으로 스타일을 적용한다.

그러면 기존에 있는 css 클래스명은 어떻게 사용할까?

아래와 같이 사용한다.

 

주의 ! : 아래와 같이 클래스명을 지정해 버리면, 다른 스타일 속성들은 하나도 안먹는다! 

const Wrapper = styled.div.attrs({
  className: 'className'
})``;

위의 클래스명 스타일을 포함한 다른 스타일을 적용(확장)하고 싶으면 어떻게 할까?

컴포지션 API를 활용한다.

const ExtendedWrapper = styled(Wrapper)`color:red`

이 경우 두 개의 클래스명을 적용한다.