无法将样式应用到 React 中的词法编辑器组件

Question

我正在开发一个 React 项目并使用 Facebook 的词法编辑器组件。我正在尝试通过创建单独的 CSS 文件来自定义其外观。然而，我的造型改变似乎没有任何效果。

编辑器.jsx：

import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import lexicalEditorTheme from "./EditorTheme";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import styles from './EditorTheme.module.css'

function Editor() {
  const initialConfig = {
    namespace: "MyEditor",
    theme: lexicalEditorTheme,
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className={styles.editorContainer}>
        <div>
          <PlainTextPlugin
            contentEditable={<ContentEditable />}
            placeholder={<div>Type something here...</div>}
            ErrorBoundary={LexicalErrorBoundary}
          />
        </div>
        <HistoryPlugin />
        <MyCustomAutoFocusPlugin />
      </div>
    </LexicalComposer>
  );
}

export default Editor;

EditorTheme.jsx：

const lexicalEditorTheme = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    quote: "editor-quote",
    heading: {
      h1: "editor-heading-h1",
      h2: "editor-heading-h2",
      h3: "editor-heading-h3",
      h4: "editor-heading-h4",
      h5: "editor-heading-h5",
    },
    list: {
      nested: {
        listitem: "editor-nested-listitem",
      },
      ol: "editor-list-ol",
      ul: "editor-list-ul",
      listitem: "editor-listitem",
    },
    image: "editor-image",
    link: "editor-link",
    text: {
      bold: "editor-text-bold",
      italic: "editor-text-italic",
      overflowed: "editor-text-overflowed",
      hashtag: "editor-text-hashtag",
      underline: "editor-text-underline",
      strikethrough: "editor-text-strikethrough",
      underlineStrikethrough: "editor-text-underlineStrikethrough",
      code: "editor-text-code",
    },
    code: "editor-code",
    codeHighlight: {
      atrule: "editor-tokenAttr",
      attr: "editor-tokenAttr",
      boolean: "editor-tokenProperty",
      builtin: "editor-tokenSelector",
      cdata: "editor-tokenComment",
      char: "editor-tokenSelector",
      class: "editor-tokenFunction",
      "class-name": "editor-tokenFunction",
      comment: "editor-tokenComment",
      constant: "editor-tokenProperty",
      deleted: "editor-tokenProperty",
      doctype: "editor-tokenComment",
      entity: "editor-tokenOperator",
      function: "editor-tokenFunction",
      important: "editor-tokenVariable",
      inserted: "editor-tokenSelector",
      keyword: "editor-tokenAttr",
      namespace: "editor-tokenVariable",
      number: "editor-tokenProperty",
      operator: "editor-tokenOperator",
      prolog: "editor-tokenComment",
      property: "editor-tokenProperty",
      punctuation: "editor-tokenPunctuation",
      regex: "editor-tokenVariable",
      selector: "editor-tokenSelector",
      string: "editor-tokenSelector",
      symbol: "editor-tokenProperty",
      tag: "editor-tokenProperty",
      url: "editor-tokenOperator",
      variable: "editor-tokenVariable",
    },
  };
  export default lexicalEditorTheme;

CSS 规则：

.ltr {
  text-align: left;
}

.rtl {
  text-align: right;
}

.editor-placeholder {
  color: dimgray;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 15px;
  user-select: none;
  pointer-events: none;
}

.editor-paragraph {
  margin: 0 0 15px 0;
  position: relative;
}

预期结果：

我想使用自定义 CSS 来设置 Lexical Composer 组件的样式。 自定义 CSS 类没有对组件产生预期的效果。

尝试解决：

我已经在 EditorTheme.jsx 文件中配置了主题。 我已经在单独的 CSS 文件中创建了用于样式化的 CSS 类（不使用我尝试过的父 div 容器的 CSS 模块，但这样效果很好）。 我尝试将 CSS 规则放入 index.css 文件中，因为该文件已被读取，但无济于事。 我已确保该组件正在使用配置的主题。 我按照 codesandbox

中的示例进行操作

Answer 1

对于我来说，在 Theme.ts 中导入我的 styles.css （特定组件的样式）是有效的。

我注意到一件事，如果您直接在 App.tsx 中导入组件，并使用根 styles.css ，那么样式就会被应用，但是如果您有一个深度嵌套的子组件，那么它就不起作用了。 这是我的片段。希望有帮助。

导入“./styles.css”；

导出默认值{
代码：“编辑器代码”，
标题：{ h1：“内容标题h1”， h2：“内容标题h2”， h3：“内容标题-h3”， h4：“内容标题-h4”，
}, };