codestates / codestates/BanThing

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

Abierto
#167 0 comentarios 0 reacciones 1 asignado Reclamado por @greenheadHQ Ver en GitHub
client error solved
Lenguaje dominante
TypeScript
Estrellas
0
Forks
2
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.