IT技术 - Chrome DevTools 中禁用了样式化组件样式 - 吾爱随笔录

IT技术 css reactjs google-chrome-devtools styled-components gatsby

2021-05-23 05:43:05

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

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

然而，当使用样式组件时，出现在 DevTools 中的每个渲染元素的所有样式/规则都是灰色、斜体和禁用的。我可以通过element.style {}在.

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

4个回答

这是因为 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。

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

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

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

其它你可能感兴趣的问题