codestates / codestates/BanThing

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

Aperta
#167 0 commenti 0 reazioni 1 assegnatario Rivendicata da @greenheadHQ Vedi su GitHub
client error solved
Lingua principale
TypeScript
Stelle
0
Fork
2
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 어떤 에러인가요?
> [에러문구] 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/)

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.