Chrome DevToolsでスタイル付きコンポーネントのスタイルが無効になっている
私は、React、Gatsby、およびstyled-componentsを使用する静的ページで作業しています。
ページをスタイリングするとき、私の開発ワークフローは通常、Chrome DevToolsに大きく関与し、好きなものになるまでスタイルを微調整し、それをコードに実装します。
ただし、styled-componentsを使用する場合、レンダリングされた各要素のDevToolsに表示されるすべてのスタイル/ルールは、灰色、斜体、無効になっています。 element.style {}にスタイルを追加することでそれらをオーバーライドできますが、それは苦痛である可能性があり、根本的な問題を解決しません。
これが私が言及しているもののスクリーンショットです。 
これは、styled-componentsがCSSOM APIを介してスタイルを注入するためです。これは、Chrome（および他のすべてのブラウザーAFAIK）の開発ツールでは処理できません。このチケットを参照してください： https：/ /bugs.chromium.org/p/chromium/issues/detail?id=387952
これは、styled-componentsがプロダクションモードの場合、つまりprocess.env.NODE_ENVが"production"に設定されている場合にのみ当てはまることに注意してください。プロダクションモードでない限り、styled-componentsは通常の<style>タグを生成します。これは、Devツールを介して操作できます。
V4.1.0では、CS_DISABLE_SPEEDYフラグを指定して、CSSOM insertRuleによるスタイルインジェクションを無効にすることができます。
もっと詳しく
https://www.styled-components.com/releases#v4.1.
https://github.com/styled-components/styled-components/pull/2185
Chrome（Cmd + q）を完全に終了し、npm update、npm installを実行し、ブラウザとlocalhostサーバーを完全に再起動しました。これで問題が解決しました。