styled-components 💅에서 style이 적용안될 때

babel의 plugin 설정에서 emotion 과 babel-plugin-styled-components 순서를 바꿔보자

추석연휴에 개인 프로젝트를 하면서 이번에는 css 적용하는 걸 styled-components를 사용해보려고 했는데, 스타일이 적용이 안되서 한참 헤맸다. 거의 2시간을 이거 때문에 허비한 것 같다. 나같은 바보가 없길 바라며!

에러는 없는데, 스타일이 적용이 안되는 현상

styled-components를 사용하기 위해서 내가 설치한 라이브러리는 2개였다.

• styled-components
• babel-plugin-styled-components

styled-components 공식문서에서 babel plugin 사용을 필수는 아니지만 강력하게 추천한다고 써있다.

// 컴포넌트 구조
<App>
  <Component />
</App>

component.js

글자색을 빨간색으로 하고 싶었다. 그런데 안됐다.

build했을 때 딱히 에러가 나는 것도 없고, localhost에서 보았을 때 console.log 에도 별다른 에러 로그가 없었다. 그러면 color 가 red 로 나와야할 것 같았는데..

꿋꿋하게 검정색.. 😡

styled.div 로 쓴게 잘못된건가 싶어서 styled.h1 으로 바꿔봤더니 h1 tag로 잘 나왔는데, style만 적용이 안됐다. (왜지왜지왜지왜지…😡😡)

const StyledDiv = styled.h1`
    color: red;
`;

폰트만 커지고 꿋꿋하게 검정색.. 😡😡😡

문제는 babel plugin 설정 순서였다

구글링해서 나오는 왠만한 글을 다 봤던 것 같은데 해결이 안되던 도중 stack over flow에서 이 글을 찾았다! 🙌
( 👉 Setup for React styled components)

emotion은 css 같은 스타일 파일을 최소화시키고 최적화시키기 위한 babel plugin인데, 선언된 값들을 parsing해서 최소화/최적화하는데(그 과정을 위 답에서는 magic이라고 표현한 것 같다), emotion이 작업을 하기 전에 babel-plugin-styled-components 플러그인을 실행하고, 그 뒤에 emotion이 작업할 수 있도록 해주어야 충돌이 발생하지 않는다는 뜻이었다.

그래서 아래와 같은 상태였던 babel.config.js파일에서 plugin 순서를 바꿔주었다.

변경 전 👇

변경 후 👇

그러면 놀랍게도 내가 원하는대로 스타일이 적용된다.

짝짝짝짝 👏👏👏👏👏👏