默认组件样式错误应用到v0.22.10+ 中的设备特定媒体查询

Question

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 最新版本 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器，使用默认设备配置 切换到平板或移动设备视图 添加文本块组件（或任何带有默认样式的组件，例如边距：10px） 切换回桌面视图 注意默认样式不会应用到桌面 预期的行为是什么？ 默认组件样式应始终应用于基础CSS规则（不使用媒体查询），无论编辑器当前选择的是哪种设备。 目前的行为是什么？ 默认样式应用于当前选择设备的媒体查询，导致： 在平板/移动端添加组件时，桌面缺少样式 在移动端添加组件时，平板上缺少样式 不同设备间的样式不一致 使用版本：0.22.12 注：似乎是0.22.10版本引入的 行为准则 [x] 我同意遵守本项目的行为准则

GJS Helper · Accepted Answer

你描述的问题是 GrapesJS v0.22.10+ 引入的一个已知行为变化，即当添加组件时，默认组件样式会错误地应用到设备特定媒体查询中，而非桌面设备视图正在激活。这导致样式在切换设备时消失或不一致。 根本原因 过去， GrapesJS 通常会将默认组件样式应用到基础CSS规则上（不使用任何媒体查询），确保它们是全局活跃的。设备特定的样式随后会作为覆盖添加。然而，在最近的版本中，当组件在编辑器中选择特定设备（例如平板、移动端）时， GrapesJS的内部样式处理似乎会隐式地将组件的初始/默认样式与当前激活设备的媒体查询关联起来。这导致默认样式被封装在 @media 块中，而不是全局应用。 例如，如果你在“平板”设备处于激活状态时添加文本组件，其默认 margin: 10px; 可能会生成为： 而不是预期的： 当你切回桌面视图时， (max-width: 992px) 媒体查询不再激活，因此 margin: 10px; 样式未应用，组件看起来没有样式。 变通/修复 最有效的变通方法是监听 component:add 事件，并将任何错误放置于特定媒体查询下的默认样式程序化移动到基础 C...

默认组件样式错误应用到v0.22.10+ 中的设备特定媒体查询

问题

GrapesJS版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（1）

相关问答

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

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

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

The documented way to parse @keyframes does not work

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

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

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类

问题