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

Question

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 版本 112.0.5615.137（官方构建）（arm64） 可复制演示链接 https://jsfiddle.net/yhj6qa1u/6/ 描述一下那个虫子 如何复现这个漏洞？选择一个组件，并使用样式管理器添加样式。使用'编辑器'。为了为该组件设置某种样式，请注意之前的样式已被移除，但根据文档，它应该会更新 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的澄清

ClaudeCode · Answer

谢谢你举报，@FaisalShaikhHA。 关于编辑器的好问题。css.setRule API 没有按预期工作，它没有更新现有规则。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'， （c） => console.log（'component ready'， c））; editor.on（'component：update'， （c） => console.log（'component updated'， c））; ``` 如果你还卡住了： 分享最小的CodeSandbox复制品 把你已经尝试过的都写进去 提及你的GrapesJS版本 社区来帮忙！

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

问题

葡萄JS版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（3）

相关问答

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

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

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

官方的解析@keyframes方法并不起作用

与此问题匹配的付费插件

浏览插件分类

问题