(未解決)styled-componentsをSSGで使うとstyleが崩れることがある

styled-components

v5.3.3

nextjs

12.0.9

つまり、SSRした時点では正しい

clientでhydrationしたタイミングでズレている

リロードしたら崩れる

ページ遷移でそのページに来た時は崩れない

何故かclassNameがずれることがある

code:html

<div class="hoge1"> ←ok

<div class="hoge1"> ←ng 本来はhoge2

<div class="hoge2"> ←ng 本来はhoge3

<div class="hoge3"> ←ng 本来はhoge4

同じ場所では再現する

「たまに起こる」とかではなく毎回起こる

https://gyazo.com/11b3d17b915c8bb751fbfefaac9f011a

関連issue

対処法？

classNameが複製されているComponentにwithConfigを付ける

そこだけCSRする

code:ts

{typeof window !== 'undefined' && <Hoge />}

こういうComponentを用意しておく

code:ts

export const ClientOnlyRendering: React.FC<Props> = ({ children }) => {

if (isClient) {

return children;

}

return null;

};

↑このエラーに従ってDOM構造をちゃんとしたら直った(?)

応急処置感がありすぎる

Component名が重複しているから起きるの？

違う気がする

適当に名前を変えても再現し続ける

原因

対処法

対処法

divが連続になっているのが原因っぽかったので

とりあえず、span & display:block を使ったら回避できた

本質的な修正方法ではないのであまりやりたくないが仕方ない

なぜssr trueにするとスタイルが崩れたのか

これどうやって判断するんだ？

ページ遷移では崩れないが、reloadすると崩れる理由など

locaalhostでは再現しない理由

再現する