Jodit React文本编辑器自定义主题配置问题咨询

jodit-react基于原生Jodit编辑器构建，虽然官方文档对自定义主题的说明较少，但可以通过以下几种方式实现：

• 覆盖全局CSS变量
  Jodit使用CSS变量统一控制主题色彩，你可以在项目的全局样式文件中重新定义这些变量，覆盖默认值：

  /* 自定义jodit主题变量 */
  .jodit-container {
    --jd-color-primary: #2563eb; /* 自定义主色调 */
    --jd-color-secondary: #475569; /* 自定义辅助色 */
    --jd-text-color: #1e293b; /* 文本颜色 */
    --jd-bg-color: #ffffff; /* 编辑器背景色 */
    --jd-toolbar-bg: #f1f5f9; /* 工具栏背景色 */
    --jd-border-color: #e2e8f0; /* 边框颜色 */
  }
  

  更多可覆盖的变量可以查看node_modules/jodit/build/jodit.min.css文件，里面包含了所有控制主题的CSS变量。

• 添加自定义类名并编写专属样式
  给JoditEditor组件添加自定义类名，然后针对该类编写样式，避免影响全局其他编辑器实例：

  import JoditEditor from "jodit-react";
  
  function CustomEditor() {
    return (
      <JoditEditor
        className="my-custom-jodit"
        // 其他配置项
      />
    );
  }
  

  对应的样式：

  .my-custom-jodit .jodit-toolbar {
    background-color: #0f172a;
    border-bottom: 1px solid #334155;
  }
  
  .my-custom-jodit .jodit-workplace {
    background-color: #1e293b;
    color: #f8fafc;
  }
  
  .my-custom-jodit .jodit-toolbar-button__icon {
    fill: #f8fafc;
  }
  

  这种方式可以精准控制编辑器的各个部分，比如工具栏、编辑区域、按钮等。

• 通过config配置注入内联样式
  在组件的config属性中，可以直接设置编辑器的内联样式，快速调整基础样式：

  <JoditEditor
    config={{
      // 编辑区域基础样式
      style: {
        backgroundColor: '#f8fafc',
        color: '#1e293b',
        fontSize: '14px'
      },
      // 工具栏样式
      toolbarStyle: {
        backgroundColor: '#ffffff',
        borderRadius: '4px 4px 0 0'
      }
    }}
  />
  

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