Chrome DevTools 中禁用了样式化组件样式

Posted 2023-03-07

【中文标题】Chrome DevTools 中禁用了样式化组件样式

【英文标题】：Styled Component styles are disabled in Chrome DevTools

【发布时间】：2019-01-03 18:25:04

【问题描述】：

我正在开发一个使用 React、Gatsby 和 styled-components 的静态页面。

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

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

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

【问题讨论】：

✋????我也是。 =/谷歌搜索把我带到了这里。正在寻找解决办法。

也在寻找解决此问题的方法。什么鬼？

试试火狐。 （请参阅下面@Trevor Burnham 的答案下的 cmets。）

虽然不理想，但如果您检查所需的元素，然后单击“+”（右上角）创建新样式，您就可以根据自己的喜好构建选择器和样式。它并不完美，但对我来说效果很好，没有任何问题。这也只有在您不仅依赖 styled-jsx 并且至少向组件中的父元素添加类名时才真正有效。

【参考方案1】：

我猜你可能会受到这个错误的影响：

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

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

【讨论】：

很遗憾，我无法复制“关闭并重新打开”解决方案，因此这可能不是同一个错误的症状。

【参考方案2】：

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

【参考方案3】：

这是因为 styled-components 通过 CSSOM API 注入样式，Chrome 中的开发工具（以及所有其他浏览器 AFAIK）无法处理。看到这张票：https://bugs.chromium.org/p/chromium/issues/detail?id=387952

请注意，这仅在 styled-components 处于生产模式时才成立，即 process.env.NODE_ENV 设置为 "production"。只要您不处于生产模式，样式组件就应该生成普通的<style> 标签，您可以通过开发工具与之交互。

【讨论】：

这不是真的，其他浏览器无法处理。 Firefox（至少 v64）能够像往常一样更改样式。

我还可以确认 macOS 上的 Firefox (v67.0.3) 允许编辑和禁用使用 insertRule() 动态添加的 CSS 规则，甚至是通过 document.head.append 注入的

从 styled-components v5 开始，您可以使用 StyleSheetManager 辅助组件上的 disableCSSOMInjection 选项禁用：styled-components.com/docs/api#stylesheetmanager

【参考方案4】：

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

更多详情https://www.styled-components.com/releases#v4.1.0https://github.com/styled-components/styled-components/pull/2185