Unable to Apply Styling to Lexical Editor Component in React

Question

I'm working on a React project and using a Lexical Editor component from Facebook. I'm trying to customize its appearance by creating a separate CSS file. However, my styling changes don't seem to have any effect.

Editor.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 rules:

.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;
}

Expected Outcome:

I want to style the Lexical Composer component with custom CSS. The custom CSS classes are not having the intended effect on the component.

Attempts to Solve:

I've configured the theme in the EditorTheme.jsx file. I've created CSS classes for styling in a separate CSS file (not using CSS Modules that is for the parent div container i tried but it worked fine that way). I've tried putting the CSS rules in the index.css file since that file was getting read but to no avail. I've ensured that the component is using the configured theme. I've followed the example at codesandbox

Aayush Rawat · Accepted Answer · 2024-04-13 03:38:58Z

1

For me importing my styles.css (Styles for the particular component) inside the Theme.ts worked.

One thing I noticed, If you are importing your component directly inside your main.tsx, and using the root styles.css , then the styles are getting applied, but if you have a child component that is deeply nested, then it is not working.

Here is my snippet. Hope it helps.

import "./styles.css";

export default {
code: "editor-code",
heading: { h1: "content-heading-h1", h2: "content-heading-h2", h3: "content-heading-h3", h4: "content-heading-h4",
}, };

answered Apr 13, 2024 at 3:38

Aayush Rawat

1192 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to Apply Styling to Lexical Editor Component in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related