codestates / codestates/BanThing

[Error Handling] next.js에서 styled-components가 정상적으로 동작하지 않는 오류

オープン
#167 コメント 0 件 リアクション 0 件 担当者 1 名 @greenheadHQ が担当を希望しています GitHub で見る
client error solved
主要言語
TypeScript
スター
0
フォーク
2
PR マージ指標
30日以内にマージされた PR はありません

説明

### 어떤 에러인가요?
> [에러문구] Warning : Prop 'className' did not match.
next js에서 styled-components 사용시 css가 깨지는 오류

> 실제 css가 적용되지 않은 모습

![스크린샷 2022-02-24 오전 11 33 20](https://user-images.githubusercontent.com/85833148/155460757-67c1ef52-ff1e-4d0a-a365-eb2209e4648b.png)

### 에러 핸들링 방법
next.js에서 styled-components를 사용할 때, css가 적용되기도 전에 렌더링될 때가 있다고 합니다.
이를 해결해 주기 위해서는 babel 세팅과 _document.jsx로 전역 html 세팅을 해주어야 합니다. 하지만 저의 경우 이미 많은 부분 진행을 한 상황이라 [공식문서](https://github.com/vercel/next.js/tree/main/examples/with-styled-components)를 참고해서 진행해도 정상적으로 작동하지 않습니다. 따라서 그냥 이전의 CSS modules을 사용해서 코드를 refactoring 해 주어야 할 것 같습니다 ㅜㅜ

### 에러 핸들링을 위해 참고한 레퍼런스 링크
[링크1](https://velog.io/@danmin20/Next.js-Typescript-Styled-component-%EC%89%BD%EA%B2%8C-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0)
[링크2](https://kyounghwan01.github.io/blog/React/next/styled-components-render-error/)

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。