Chrome DevTools中已禁用样式化组件样式 [英] Styled Component styles are disabled in Chrome DevTools

问题描述

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

I am working on a static page that uses React, Gatsby, and styled-components.

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

When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code.

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

When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {}, but that can be a pain, and it doesn't solve the root question which is: why are styles applied by styled-components disabled in DevTools?

这是我所指的屏幕截图.

Here's a screenshot of what I'm referring to.

推荐答案

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

It's because styled-components injects styles through the CSSOM API, which the Dev Tools in Chrome (and every other browser AFAIK) can't handle. See this ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952

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

Note that this is only true when styled-components is in production mode, i.e. process.env.NODE_ENV is set to "production". As long as you aren't in production mode, styled-components should generate normal <style> tags, which you can interact with through the Dev Tools.

这篇关于Chrome DevTools中已禁用样式化组件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！