codestates / codestates/BanThing

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

未关闭
#167 0 条评论 0 个 reaction 已指派 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 摘要。