在Chrome DevTools中禁用样式组件样式
我正在开发一个静态页面，它使用React、Gatsby和样式组件。
当设计页面时，我的开发工作流程通常会涉及到Chrome DevTools，在那里调整样式直到我有了我喜欢的东西，然后在代码中实现它们。
然而，在使用样式化组件时，每个呈现的元素在DevTools中出现的所有样式/规则都是灰色的、斜体化的和禁用的。我可以通过在element.style {}中添加样式来覆盖它们，但这可能会带来麻烦，它不能解决根本问题:为什么样式组件在DevTools中被禁用？
这是我所指的截图。
回答 4
Stack Overflow用户
发布于 2018-10-22 03:17:17
这是因为样式组件通过CSSOM API注入样式，而Chrome中的Dev工具(以及其他所有浏览器AFAIK)都无法处理这些样式。看这张票：https://bugs.chromium.org/p/chromium/issues/detail?id=387952
请注意，只有当组件处于生产模式时，这才是正确的，即process.env.NODE_ENV设置为"production"。只要您不在生产模式中，样式组件就应该生成普通的<style>标记，您可以通过Dev工具与它们交互。
Stack Overflow用户
发布于 2019-04-23 05:49:06
在v4.1.0中，可以提供SC_DISABLE_SPEEDY标志来禁用CSSOM insertRule的样式注入。
更多细节
https://www.styled-components.com/releases#v4.1.0
https://github.com/styled-components/styled-components/pull/2185
Stack Overflow用户
发布于 2018-09-13 21:00:03
我完全退出了Chrome (Cmd + q)，运行了npm更新，npm安装，并完成了浏览器和本地主机服务器的全面重新启动。这个帮我修好了。
https://stackoverflow.com/questions/51544215
复制相似问题
腾讯云开发者
