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

Question

我正在使用React，Gatsby和样式化组件的静态页面上工作。

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

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

这是我所指的屏幕截图。

Answer 1

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

请注意，仅当样式化组件处于生产模式时，即process.env.NODE_ENV设置为"production"时，这才是正确的。只要您不在生产模式下，样式化的组件就会生成常规的<style>标签，您可以通过开发工具与之交互。

Answer 2

我完全退出了Chrome（Cmd + q），运行了npm更新，安装了npm，并完全重新启动了浏览器和localhost服务器。这为我解决了。

Answer 3

在v4.1.0中，可以提供SC_DISABLE_SPEEDY标志以使用CSSOM public class MainActivity extends AppCompatActivity { TextView textInfo; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Application.getInstance().initAppLanguage(this); setContentView(R.layout.activity_main); } 禁用样式注入。

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

Answer 4

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

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

如果您关闭开发工具并再次将其重新打开，则可能会暂时解决此问题。