自定义组件样式在删除和重新添加后不会被应用

Question

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v143.0.7499.193 可复制演示链接 https://codesandbox.io/p/sandbox/2l3887 描述一下那个虫子 如何复现这个漏洞？ 打开页面并加载 GrapesJS 编辑器 选择行组件并删除它 点击左侧边栏的行组件，向画布添加行 预期的行为是什么？ 新添加的行组件应显示正确的样式（白色背景、边框、边框半径、填充等）。 目前的行为是什么？ 重新添加 Row 组件后，styles 属性中定义的 .gjs-row CSS 类未应用到 DOM 元素，导致样式缺失，组件显示为无样式的纯文本容器 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 行组件定义 编辑。Components.addType（'row'， { 型号：{ 默认值：{ 名称：“Row”， 标签名称：“div”， 可拖拽：确实， Droppable：确实如此， 属性：{ 类：'GJS-ROW' }， 风格： .gjs-row { 显示：flex; 弹性缠绕：缠绕; 缝隙：16...

mdmontesinos · Accepted Answer

我也遇到类似问题，重新添加的组件拥有正确的样式属性： <img width=“1112” height=“17” alt=“Image” src=“https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d” /> 但如果我用“查看代码”按钮，CSS就没有注入，在我的情况下，它们甚至不在DOM里。组件本身能用，因为刚加入时样式确实注入了，运行正常。只有移除并重新添加后才会失败。 我也测试过用“component.replaceWith（newComponent）”函数代替“component.remove（）”和“editor.addComponents（newComponent）”。 代码示例： “''t” 组件定义 domComponents.addType（'my-type'， { 型号：{ 默认值：{ 标签名称：“div”， 名称：“我的类型”， attributes： { 'data-gjs-type'： 'my-type' }， } } }); 添加组件（这里样式是有效的）...

artf · Answer

@mdmontesinos你的用法不正确，“样式”必须在组件定义中定义，且不被期望改变。另外，如果组件预期会被重用，ID会被重新创建，依赖类，尤其是样式，那用ID定义组件是不对的。

但@shery的报告似乎是真实的;样式缓存可能有问题。

mdmontesinos · Answer

@artf我用ID是因为我的项目里总会有一个该组件的实例。我的用例是组件外部设计成作为“后台”，然后导入到使用该组件的项目中。因此，当外部组件更新时，我需要在项目中更新它，这也是我尝试重建它的原因，它可能会修改组件或样式。有没有办法强制刷新样式？

自定义组件样式在删除和重新添加后不会被应用

问题

回答（4）

相关问答

当你删除组件时，组件间的重复类也会被删除。

内容为“null”的TextNode被渲染为“null”，而不是空白

Flex Property not working in style manager

TypeError：e.getRoot 不是函数（样式管理器中的竞态条件）

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

GJS.Market Is Now Available for India 🇮🇳

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

浏览插件分类