Styled Component styles are disabled in Chrome DevTools
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.
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