jodit-react编辑器图标过大、样式显示异常如何解决

问题现象 #

在React项目中引入jodit-react富文本编辑器时，未编写任何自定义CSS修改编辑器默认样式，却出现工具栏图标尺寸过大、编辑器整体布局错位、显示形态异常的问题，视觉效果不符合预期。
对应效果参考：

• 异常初始效果：
• 页面向下滚动后的异常效果：
• 预期正常显示效果：

复现代码 #

import JoditEditor from "jodit-react";

function Comp(){
  return(
    <div> 
      <JoditEditor></JoditEditor> 
    </div>     
  ) 
}

故障原因 #

1. 构建工具未自动加载jodit包内置的核心样式文件，编辑器默认样式完全未生效
2. 项目全局存在的CSS重置规则（比如统一给所有svg/img标签设置100%宽高、全局修改盒模型属性）优先级高于编辑器内置样式，覆盖了编辑器的默认布局规则

修复方案 #

• 手动导入jodit核心样式：在使用编辑器的组件文件，或者项目全局入口文件（如main.jsx/App.jsx）中添加样式导入语句：

import 'jodit/build/jodit.min.css';

• 排查全局CSS冲突：检查项目中是否存在作用在所有img、svg标签上的全局宽高、定位类样式，如果存在，添加更高优先级的规则限定这些全局样式不影响编辑器内部元素，示例代码：

/* 放在全局样式文件末尾即可 */
.jodit-container * {
  box-sizing: border-box;
}
.jodit-container svg,
.jodit-container img {
  width: auto;
  height: auto;
  max-width: unset;
}

• Vite项目额外配置：如果使用Vite作为构建工具，可在vite.config.js中将jodit相关依赖加入预构建列表，避免开发阶段样式加载异常：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['jodit', 'jodit-react']
  }
})

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