lexical editor 的主题类名需通过 css 文件显式导入才能生效单纯在组件中引用 css 模块或全局样式表往往因作用域隔离或加载时机问题导致样式不生效本文详解如何可靠应用自定义 css 样式。 lexical editor 的主题类名需通过 css 文件显式导入才能生效单纯在组件中引用 css 模块或全局样式表往往因作用域隔离或加载时机问题导致样式不生效本文详解如何可靠应用自定义 css 样式。Lexical Editor 采用「主题驱动」的样式机制它本身不注入任何默认 CSS而是将预设的 class 名如 editor-paragraph、editor-placeholder注入 DOM 节点再由开发者自行提供对应样式的 CSS 规则。因此样式“不生效”的根本原因通常不是配置错误而是 CSS 文件未被实际加载到运行时样式表中尤其在使用 CSS Modules、动态导入或嵌套组件结构时极易发生。? 正确做法在 Theme 文件中直接导入 CSS关键原则是让样式文件与主题对象在同一个模块作用域内被解析和执行。推荐将自定义 CSS非 CSS Modules直接导入 EditorTheme.jsx或 .ts确保其在 Lexical 初始化前已注入 head// EditorTheme.jsximport ./EditorTheme.css; // ? 正确在此处导入纯 CSS 文件const lexicalEditorTheme { paragraph: editor-paragraph, placeholder: editor-placeholder, heading: { h1: editor-heading-h1, h2: editor-heading-h2, }, text: { bold: editor-text-bold, italic: editor-text-italic, }, // ... 其他 theme 配置};export default lexicalEditorTheme;对应 EditorTheme.css注意必须是普通 .css非 .module.css AI智研社 AI智研社是一个专注于人工智能领域的综合性平台