Les styles de composants stylisés sont désactivés dans Chrome DevTools
Je travaille sur une page statique qui utilise React, Gatsby et des composants de style.
Lors du stylisme d'une page, mon flux de travail de développement implique généralement fortement Chrome DevTools, peaufiner les styles jusqu'à ce que j'aie quelque chose que j'aime, puis les implémenter dans le code.
Cependant, lorsque vous utilisez des composants de style, tous les styles/règles qui apparaissent dans DevTools pour chaque élément rendu sont gris, en italique et désactivés. Je peux les remplacer en ajoutant des styles dans element.style {}, mais cela peut être pénible, et cela ne résout pas la question fondamentale qui est: pourquoi les styles appliqués par les composants stylisés sont-ils désactivés dans DevTools?
Voici une capture d'écran de ce à quoi je fais référence. 
C'est parce que les composants stylisés injectent des styles via l'API CSSOM, que les outils de développement de Chrome (et tous les autres navigateurs AFAIK) ne peuvent pas gérer. Voir ce ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952
Notez que cela n'est vrai que lorsque les composants stylisés sont en mode production, c'est-à-dire que process.env.NODE_ENV Est défini sur "production". Tant que vous n'êtes pas en mode production, les composants stylisés doivent générer des balises <style> Normales, avec lesquelles vous pouvez interagir via les outils de développement.
Dans la version 4.1.0, il est possible de fournir l'indicateur SC_DISABLE_SPEEDY pour désactiver l'injection de styles avec CSSOM insertRule.
Plus de détails
https://www.styled-components.com/releases#v4.1.
https://github.com/styled-components/styled-components/pull/2185
J'ai fait un arrêt complet de Chrome (Cmd + q), exécuté la mise à jour npm, l'installation de npm et fait une relance complète du navigateur et du serveur localhost. Cela a résolu le problème pour moi.