按分类浏览
GrapesJS 风格
GrapesJS 样式管理器插件为可视化样式界面扩展自定义 CSS 属性、设计令牌支持与进阶选择器控件。这些扩展可以向 GrapesJS 样式面板加入取色器、间距编辑器、排版控件和自定义 CSS 编辑器。浏览经 GrapesJS 开发者社区审核的免费与付费样式扩展。
关于 GrapesJS 风格
GrapesJS 样式管理器是用户为所选组件应用 CSS 属性的面板——背景色、字体、间距、边框与布局。默认样式管理器包含一组按分区归类的标准 CSS 属性字段。GJS.Market 上的样式管理器插件在此基础上扩展出自定义分区、进阶控件与设计体系集成。自定义分区插件按特定设计语言添加属性组：带过渡与动画控件的 Motion 分区、包含 CSS Grid 布局属性的 Grid 分区，或带行高、字距与字体变体字段的 Typography 分区。设计令牌插件把样式管理器接入设计令牌库——Figma tokens、Style Dictionary 输出或自定义 JSON 令牌文件——从而让颜色与间距字段显示具名令牌而非原始十六进制值。CSS 编辑器插件在可视化样式管理器旁边加入原始 CSS 代码视图。进阶样式管理器插件把样式限定到设备断点，为桌面、平板与手机分别显示不同的属性值，并清晰标示当前生效的断点。
GrapesJS 风格 — 常见问题
- 什么是 GrapesJS 样式管理器？
- 它是为所选组件写入 CSS 的面板。属性按分区归类——排版、装饰、尺寸、flex——每个字段对应一个 CSS 属性。该管理器并不设置内联样式：它把规则写入编辑器的 CSS composer，因此输出始终是一份可导出的真实样式表。
- 如何向样式管理器添加自定义属性？
- 在初始化时配置 styleManager.sectors，或在运行时调用 editor.StyleManager.addSector 与 addProperty。每个属性都要声明名称、所写入的 CSS 属性以及类型——select、color、slider、composite 或 stack。把一组分区封装进插件，你就得到一个契合自身设计语言的可复用面板。
- 为什么我的样式改动会影响到其他元素？
- 因为样式管理器作用的是所选的 CSS 规则，而不是元素本身。如果组件带有 class，改动会应用到该 class，也就作用于共享它的所有元素。把选择器管理器切换到组件自身的 id 状态，即可只为这一个实例设置样式——这是 GrapesJS 样式设置中最常见的困惑来源。
- 可以为不同设备断点设置不同样式吗？
- 可以。设备管理器的断点与样式管理器是联动的：选中平板或手机后，后续改动会写入该设备的媒体查询。导出的 CSS 中包含真实的媒体查询。本分类的插件会更清晰地标示当前生效的断点，避免误改桌面端样式。
- 样式管理器能用设计令牌替代十六进制值吗？
- 默认不能，但本分类的插件提供了这一能力。它们把颜色与间距字段绑定到令牌源——Figma tokens、Style Dictionary 输出或自定义 JSON 文件——用户选择具名令牌，CSS 中写入的是变量而非原始值。这正是让编辑器输出与既有设计体系保持一致的关键。