编辑。Css.setRule API 没有按预期工作，它没有更新现有规则。

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 112.0.5615.137（官方构建）（arm64） 可复制演示链接 https://jsfiddle.net/yhj6qa1u/6/ 描述一下那个虫子 如何复现这个漏洞？选择一个组件，并使用样式管理器添加样式。使用 editor.Css.setRule 为该组件设置样式，注意之前的样式已被移除，但根据文档，它应该会更新CSS规则。 预期的行为是什么？ 它应该更新现有规则。 目前的行为是什么？ 它取消了现有规则，而不是更新现有规则。 https://github.com/GrapesJS/grapesjs/assets/102785785/28560d08-156a-46da-b901-3aec0636a62a 行为准则 [X] 我同意遵守本项目的行为准则

artf · Accepted Answer

你好，@FaisalShaikhHA这是预期中的行为，但我猜“setRule”的文档有点误导。规则实际上是更新的（不会用相同的选择器创建新的规则），但样式只是被替换。 如果你需要添加新样式而不是替换它们，这就是你应该做的 “''js const selector = '#${this.getId（）}'; const rule = 编辑器。Css.getRule（selector）; 编辑。Css.setRule（selector， { ...统治？getStyle（）， 背景：“黑人” }); ``` 我想我可以添加一个新的“addStyles？： 布尔值”选项来处理类似的使用场景。

FaisalShaikhHA · Answer

感谢@artf的澄清

GJS Helper · Answer

你在editor.Css.setRule上观察到的行为不是bug，而是GrapesJS CSS Composer API设计时如何处理规则更新。当你调用editor.Css.setRule(selector, styleObject)时，如果已经存在带有该选择器（以及媒体查询、状态等其他上下文）的规则，GrapesJS会用你提供的新styleObject版本替换该规则的整个样式对象。它不会自动将新属性与现有属性合并。 这与GrapesJS（以及GrapesJSBackbone.js模型模型的基础）中模型属性的设置方式一致：用对象值设置属性会替换之前的对象，默认不会执行深度合并。 为了实现通过合并新样式和当前样式来更新现有规则的预期行为，你需要明确检索现有规则，获取其当前样式，将其与新样式合并，然后将合并后的样式对象应用回规则。 根本原因 editor.Css.setRule内部使用CssRule.set('style', newStyleObject)。当调用set对包含对象的模型属性（如CssRule模型的 style 属性）时，它会替换整个对象，而不是合并其属性。你预期的是深度合...

编辑。Css.setRule API 没有按预期工作，它没有更新现有规则。

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（3）

相关问答

从“pageManager”加载“组件”和“样式”

诸如 md：flex-row（tailwind）等组件样式被移除

在单个组件中添加超过 20 个类时，性能问题

The documented way to parse @keyframes does not work

与此问题匹配的付费插件

浏览插件分类

问题