无法在 Chrome 中编辑样式？

Posted 2023-03-06

【中文标题】无法在 Chrome 中编辑样式？

【英文标题】：Impossible to edit styles in 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】：

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