codestates / codestates/BanThing

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

Đang mở
#167 0 bình luận 0 reaction 1 người được giao Được @greenheadHQ nhận Xem trên GitHub
client error solved
Ngôn ngữ chính
TypeScript
Star
0
Fork
2
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.