React中无法为Lexical Editor组件应用自定义样式

问题核心 #

你遇到的关键问题是CSS类名不匹配：

• 你在EditorTheme.jsx里配置的主题类名是普通字符串（比如editor-placeholder），但如果使用CSS Modules（导入为styles），实际编译后的类名会被添加哈希后缀（例如editor-placeholder_xyz789），导致主题配置的类名和页面实际生效的类名对不上。
• 若放到index.css仍无效，大概率是选择器优先级低于Lexical默认样式，或者CSS文件未正确引入。

解决方案 #

方案1：改用全局CSS（最直接） #

1. 把EditorTheme.module.css重命名为EditorTheme.css（移除.module后缀）
2. 修改Editor.jsx中的导入语句：

// 替换原有的模块化导入
import './EditorTheme.css';

3. 保持EditorTheme.jsx里的类名不变，此时全局CSS的类名会和主题配置完全匹配，样式即可生效。

方案2：保留CSS Modules（维持样式隔离） #

如果想继续用CSS Modules的模块化特性，需要让主题配置使用编译后的哈希类名：

1. 修改EditorTheme.jsx，导入styles并替换所有类名字符串：

import styles from './EditorTheme.module.css';

const lexicalEditorTheme = {
    ltr: styles.ltr,
    rtl: styles.rtl,
    placeholder: styles['editor-placeholder'],
    paragraph: styles['editor-paragraph'],
    quote: styles['editor-quote'],
    heading: {
      h1: styles['editor-heading-h1'],
      h2: styles['editor-heading-h2'],
      h3: styles['editor-heading-h3'],
      h4: styles['editor-heading-h4'],
      h5: styles['editor-heading-h5'],
    },
    // 其余所有主题属性都按此方式替换为styles对应的键
    // ...
};
export default lexicalEditorTheme;

2. Editor.jsx中可以保留styles导入，用于editorContainer的样式：

import styles from './EditorTheme.module.css';

额外排查项 #

• 检查CSS优先级：如果Lexical默认样式覆盖了你的自定义样式，可以用更具体的选择器（比如.editorContainer .editor-paragraph）提升优先级，尽量避免用!important。
• 补全onError函数：你的initialConfig里用到了onError但未定义，可能导致编辑器初始化异常，补充定义：

function onError(error) {
  console.error('Lexical编辑器错误:', error);
}

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