logo标签列表

Styled Component在Chrome DevTools中的样式被禁用

cssreactjsgoogle-chrome-devtoolsstyled-componentsgatsby
23

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

在样式化页面时，我的开发工作流程通常会大量使用Chrome DevTools，在那里微调样式直到我满意为止，然后再将它们实现到代码中。

但是，当使用styled-components时，每个渲染元素的所有样式/规则都会显示为灰色、斜体和禁用状态。我可以通过添加element.style {}中的样式来覆盖它们，但这可能会很麻烦，并且无法解决根本问题，即：为什么由styled-components应用的样式在DevTools中被禁用了呢？

这里是我所指的截图。 screenshot

1
我也是。谷歌搜索带我来到这里。正在寻找解决方法。 - anonymous coward
还在寻找解决方法。这是怎么回事？ - Scott O'Toole
试试Firefox。（请参见下面@Trevor Burnham答案下的评论。） - colin moock
虽然不是最理想的方法，但如果您检查所需元素，然后单击“+”（右上角）创建新样式，您可以根据自己的喜好构建选择器和样式。这并不完美，但对我来说已经很好用了，没有任何问题。这只适用于您不仅依赖styled-jsx，而且还将类名添加到组件中至少父元素的情况。 - John Detlefs
4个回答
17

这是因为 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> 标签，您可以通过开发者工具进行交互。

3
其他浏览器无法处理这个是不正确的说法。Firefox（至少版本64）可以像往常一样更改样式。 - Jonathan Gruber
1
我可以确认，在macOS上，Firefox（v67.0.3）允许编辑和禁用使用insertRule()动态添加的CSS规则，甚至是注入到document.head.append()中的<style>元素中添加的规则。 - colin moock
从styled-components v5开始，您可以在StyleSheetManager帮助器组件上使用disableCSSOMInjection选项来禁用它。详见：https://styled-components.com/docs/api#stylesheetmanager - Christopher Scott
3
0

我完全退出了Chrome（Cmd + q），运行了npm update，npm install，并完全重新启动了浏览器和本地主机服务器。这对我有用。

-1
很遗憾，我无法复制“关闭并重新打开”的解决方案，因此这可能不是相同错误的症状。 - lusk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接