Edited at

【React】styled-componentsのGlobalStyleがデプロイすると効かなくなるときの対処法


問題

Styled Components v4で実装されたAPI、createGlobalStyleでグローバルスタイルを適用します。

const GlobalStyle = createGlobalStyle`

body {
margin: 0;
padding: 0;
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
font-family: 'Noto Sans JP', sans-serif;
}
`
;

すると、ローカル環境では正常に機能するが、デプロイするとグローバルスタイルが適用されないというケースがあります。


原因

ざっと調べた限りでは、これという原因はわかりませんでした。

たびたびissueでも取り上げられているようです。

ただ、@importの挙動が不安定ということらしいので、上記のコードの例に限っては、body内で@importしているところが怪しそうです。


対処法

@importをトップレベルに移動してきます。

const GlobalStyle = createGlobalStyle`

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
* {
margin: 0;
padding: 0;
font-family: 'Noto Sans JP', sans-serif;
}
`
;

これで私の環境では問題は解消されました。

ただ、できれば@importは使わないほうがいいかもしれません。