23

I am working on a static page that uses React, Gatsby, and styled-components.

When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code.

When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {}, but that can be a pain, and it doesn't solve the root question which is: why are styles applied by styled-components disabled in DevTools?

Here's a screenshot of what I'm referring to. screenshot

dance2die
  • 35,807
  • 39
  • 131
  • 194
lusk
  • 541
  • 5
  • 21
  • 1
    ✋ Me too. =/ Googling brought me here. Looking for a fix. – anonymous coward Aug 23 '18 at 17:52
  • Also looking for a fix for this. What the heck? – Scott O'Toole Sep 13 '18 at 17:27
  • Try Firefox. (See comments under @Trevor Burnham's answer, below.) – colin moock Jul 30 '19 at 02:37
  • While not ideal, if you inspect the required element, then click the "+" (top right) to create a new style, you can then build the selectors and style to your heart's content. It's not perfect, but has worked nicely for me without any issues. This also only really works if you are not just relying on styled-jsx but also add class names to at least the parent elements in your component. – John Detlefs Apr 27 '20 at 08:25

4 Answers4

17

It's because styled-components injects styles through the CSSOM API, which the Dev Tools in Chrome (and every other browser AFAIK) can't handle. See this ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952

Note that this is only true when styled-components is in production mode, i.e. process.env.NODE_ENV is set to "production". As long as you aren't in production mode, styled-components should generate normal <style> tags, which you can interact with through the Dev Tools.

Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196
  • 3
    It's not true, that other browsers can't handle this. Firefox (at least v64) is able to change the styles as usual. – Jonathan Gruber Jan 22 '19 at 16:31
  • 1
    I can also confirm that Firefox (v67.0.3) on macOS allows editing and disabling of CSS rules added dynamically with insertRule(), even rules added into – colin moock Jul 30 '19 at 02:35
  • As of styled-components v5, you can disable with `disableCSSOMInjection` option on StyleSheetManager helper component: https://styled-components.com/docs/api#stylesheetmanager – Christopher Scott May 13 '20 at 21:39
3

In v4.1.0 it's possible to provide SC_DISABLE_SPEEDY flag to disable styles injection with CSSOM insertRule.

More details
https://www.styled-components.com/releases#v4.1.0
https://github.com/styled-components/styled-components/pull/2185

Eugene Karataev
  • 1,777
  • 1
  • 11
  • 24
0

I did a full quit of Chrome (Cmd + q), ran npm update, npm install, and did a full relaunch of the browser and localhost server. This fixed it for me.

Scott O'Toole
  • 326
  • 3
  • 10
-1

At a guess, I'd say you might be affected by this bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=796629

If you close the dev tools and reopen them again, this might fix the issue temporarily.

chmac
  • 11,757
  • 3
  • 32
  • 36
  • Unfortunately I'm not able to replicate the "close and reopen" solution, so this may not be a symptom of the same bug. – lusk Aug 24 '18 at 09:34