Chrome DevTools中禁用了样式化组件样式
Dlu*_*uks 17 css google-chrome-devtools reactjs gatsby styled-components
我正在使用一个使用React,Gatsby和样式组件的静态页面.
在设置页面样式时,我的开发工作流程通常涉及Chrome DevTools,在那里调整样式,直到我有我喜欢的东西,然后在代码中实现它们.
但是,使用样式化组件时,DevTools中为每个呈现元素显示的所有样式/规则都是灰色,斜体和禁用.我可以通过添加样式来覆盖它们element.style {},但这可能很痛苦,并且它无法解决根本问题:为什么样式应用程序在DevTools中禁用样式组件？
这是我所指的截图.
Tre*_*ham 10
这是因为样式组件通过CSSOM API注入样式，而Chrome中的开发工具（以及其他所有浏览器AFAIK）无法处理CSSOM API。看到这张票：https : //bugs.chromium.org/p/chromium/issues/detail?id=387952
请注意，仅当样式组件处于生产模式（即process.env.NODE_ENV设置为）时，这才是正确的"production"。只要您不在生产模式下，样式化组件就应该生成普通<style>标签，您可以通过开发工具与之交互。
- 这不是真的，其他浏览器无法处理这个。Firefox（至少 v64）能够像往常一样更改样式。 (3认同)
| 归档时间： |
|
| 查看次数： |
1648 次 |
| 最近记录： |