无法在 Chrome 中编辑样式？答案

【问题标题】：Impossible to edit styles in Chrome?无法在 Chrome 中编辑样式？
【发布时间】：2019-03-06 02:01:22
【问题描述】：

由于我已经使用styled-components 实现了服务器端渲染和管理样式，因此我无法在 Chrome 开发工具中编辑样式。 devtools 中的样式变为斜体，并且没有用于关闭/打开指定样式的复选框。

它在 Mozilla 中可以正常工作。但为什么不在 Chrome 中呢？任何想法为什么会发生？谢谢。

注意：它发生在生产中。

【问题讨论】：

这一直让我在新的 Chrome 中发疯（当我使用锁定的旧 chrome 时，它从来没有做过这种愚蠢的行为）。我必须保持对整个页面和框架的全面刷新，这样我才能在 devtools 中调整样式。太烦人了。

【解决方案1】：

我认为您可能会在生产中看到通过“快速模式”注入的样式。这使用了一个special DOM API，Chrome DevTools 目前仅以只读方式显示。我们还没有设置逃生舱来禁用这种注入方法，但是it's being considered。

在开发模式下运行设置时，所有内容通常都应该是可检查和可编辑的。

【讨论】：

我在这里看到的 快速模式 的问题显然是它不尊重特异性规则。并且总是有优先权（比如内联样式？），或者这就是JSS 让它看起来的样子。无论哪种方式，这都是模式或 JSS 中的错误。
不，它确实尊重特异性，无论注入向量如何，所有 CSS 都遵循特异性。
我的意思是 JSS 让它看起来像是将它们附加到一个类名，但实际上它们更像是内联样式注入的。并且它们优先于具有相同样式的规则的 className，在相同元素上指定并且在以快速模式（或其他方式）注入的 className 之后。

【解决方案2】：

你可能还想考虑火狐，它可以像往常一样编辑这样的样式

【讨论】：