更改带有已有类的组件的CSS属性，是修改该类，而不是添加新的类

Question

你可以在试玩版（http://grapesjs.com/demo.html）中看到这一点。选择导航项目之一（例如“Web”）——注意它已有“菜单项”类别。如果你现在更改了一些属性，比如文本对齐，它会把这些更改应用到菜单项类上，这会影响其他实例（“模板”、“构建器”）。

是否有可能强制GrapesJS应用一个新的“唯一”类并在那里应用更改——类似于对没有现有类的组件做更改（例如“c1234”）？

最终我希望任何样式更改只适用于所选物品，绝不适用于同类型的其他实例。

谢谢

thecodefish · Accepted Answer

我在想，这种行为可能是这样的： 默认（当前配置）：如果元素没有类，则基于 cid 创建唯一类并应用样式如果元素有类，则对这些类的并集（或UI中选择的类）应用样式 切换行为测试元素是否存在基于CID的现有类，如果不存在，则创建一个始终仅对 cid 类应用自定义样式

artf · Answer

你好@thecodefish你怎么看这种做法？ https://codepen.io/artf/pen/jaaKvq

你会在那里看到如何将选择器设为私有（用户无法样式化），以及使用新的 ['avoidInlineStyle']（https://github.com/artf/grapesjs/releases/tag/v0.12.37）选项，允许你为组件（而非类选择器）进行样式，而不丢失响应性和状态的使用（例如：hover）。

artf · Answer

我觉得你有两个选择：只需取消选择类，在这种情况下，样式管理器的作用域会切换到组件，而不是规则为组件添加一个新类，取代“.menu-item”规则，你会得到“.menu-item.your-new-class”

更改带有已有类的组件的CSS属性，是修改该类，而不是添加新的类

问题

回答（3）

相关问答

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

调整图片大小时出现错误。

在为 HTML 组件添加边界样式时，css json 只抓取边界选择器，却不抓取 border-width、border-style、border-colorBUG 的选择器：

切换设备时，默认样式属性不会被重新选择

与此问题匹配的付费插件

浏览插件分类