Styled-Components error: className did not match

babel

문제

styled-components 사용시 다음고 같은 에러가 떴다 image

해결법

babel-plugin-styled-components를 설치하고

npm i babel-plugin-styled-components

.babelrc 파일을 생성해 아래처럼 작성했더니 문제가 사라졌다

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", {"ssr": true}]]
}

참고 링크

github 이슈의 해결법
npm babel-plugin-styled-components 문서