如何在React环境下修改GrapesJS编辑器的默认颜色？

方法一：自定义CSS覆盖默认样式 #

通过浏览器开发者工具（F12）定位截图中对应颜色区域的元素类名，然后在React项目的全局CSS文件或组件样式中添加自定义样式覆盖：

/* 示例：修改左侧面板背景色 */
.gjs-pn-panel {
  background-color: #2c3e50 !important;
}

/* 示例：修改顶部工具栏背景色 */
.gjs-toolbar {
  background-color: #34495e !important;
}

/* 示例：修改选中元素的高亮边框色 */
.gjs-selected {
  border-color: #e74c3c !important;
}

使用!important是为了确保自定义样式优先级高于GrapesJS的默认样式。

方法二：通过GrapesJS初始化配置设置主题色 #

在初始化GrapesJS编辑器时，通过theme配置项直接定义主题颜色变量：

import grapesjs from 'grapesjs';

const initEditor = () => {
  const editor = grapesjs.init({
    container: '#gjs',
    // 其他编辑器配置...
    theme: {
      colors: {
        primary: '#2c3e50', // 主色调，对应工具栏、面板的核心颜色
        secondary: '#34495e',
      },
      vars: {
        'panel-bg': '#2c3e50', // 左侧面板背景色
        'toolbar-bg': '#34495e', // 顶部工具栏背景色
        'color-primary': '#e74c3c', // 主文本/图标颜色
      }
    }
  });
};

不同版本的GrapesJS主题配置参数可能略有差异，可根据使用版本调整配置项。

内容的提问来源于stack exchange，提问作者Sunisha Guptan