Chrome DevTools 中禁用了带样式的组件样式

Styled Component styles are disabled in Chrome DevTools

我正在开发一个使用 React、Gatsby 和样式化组件的静态页面。

在设置页面样式时，我的开发工作流程通常会大量涉及 Chrome DevTools，在那里调整样式直到我得到我喜欢的东西，然后在代码中实现它们。

然而，当使用样式化组件时，出现在 DevTools 中的每个呈现元素的所有 styles/rules 都是灰色、斜体和禁用的。我可以通过在 element.style {} 中添加样式来覆盖它们，但这可能会很痛苦，而且它不能解决根本问题：为什么样式组件应用的样式在 DevTools 中被禁用？

这是我所指内容的屏幕截图。

我猜测，您可能会受到此错误的影响：

如果您关闭开发工具并再次重新打开它们，这可能会暂时解决问题。

我完全退出了 Chrome (Cmd + q)、运行 npm update、npm install，并完全重新启动了浏览器和本地主机服务器。这为我修好了。

这是因为 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> 标签，您可以通过开发工具与之交互。

在 v4.1.0 中，可以提供 SC_DISABLE_SPEEDY 标志来禁用 CSSOM 样式注入 insertRule。