如何隐藏Lexical库生成输入框及其对应p标签的聚焦边框？

我使用Facebook的Lexical库创建了输入框，无法隐藏该输入框及其生成的<p>标签在聚焦状态下的边框。我尝试通过开发者工具添加CSS属性、在theme中配置样式、给组件传入style属性，但均未生效。

以下是我的代码：

import { $getRoot, $getSelection } from 'lexical';
import { useEffect } from 'react';

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 { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';

const theme = {
    p: {
        ':focus': {
            outline: 'none !important',
            boxShadow: 'none',
            border: 'none !important',
        },
    },
};

function onChange(editorState) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

function MyCustomAutoFocusPlugin() {
    const [editor] = useLexicalComposerContext();

    useEffect(() => {
        // Focus the editor when the effect fires!
        editor.focus();
    }, [editor]);

    return null;
}

function onError(error) {
    console.error(error);
}

export default function Editor() {
    const initialConfig = {
        namespace: 'MyEditor',
        theme,
        onError,
    };

    return (
        <div style={{ width: '90%' }}>
            <LexicalComposer initialConfig={{ initialConfig }}>
                <PlainTextPlugin
                    contentEditable={<ContentEditable style={{ border: 'none' }} />}
                    ErrorBoundary={LexicalErrorBoundary}
                />
                <OnChangePlugin onChange={onChange} />
                <HistoryPlugin />
                <MyCustomAutoFocusPlugin />
            </LexicalComposer>
        </div>
    );
}

解决方案 #

你的代码存在两个核心问题，导致样式无法生效：

1. initialConfig传递错误 #

在LexicalComposer组件中，你错误地将initialConfig嵌套了一层对象：

<LexicalComposer initialConfig={{ initialConfig }}>

正确的写法应该直接传递配置对象，否则Lexical无法正确读取theme等配置：

<LexicalComposer initialConfig={initialConfig}>

2. Theme配置的目标元素错误 #

聚焦时的边框样式并非来自内部的<p>标签，而是作用在ContentEditable容器（Lexical编辑器的根容器）上。你需要调整theme的配置项，针对编辑器容器的聚焦状态设置样式：

const theme = {
  // 针对编辑器容器设置基础和聚焦样式
  contentEditable: {
    outline: 'none',
    border: 'none',
    '&:focus': {
      outline: 'none !important',
      boxShadow: 'none',
      border: 'none !important',
    },
  },
  // 若内部p标签仍有额外样式，可保留配置
  p: {
    margin: 0,
    '&:focus': {
      outline: 'none',
      border: 'none',
    },
  },
};

补充：全局CSS覆盖（可选） #

如果上述theme配置仍无法覆盖默认样式，可以添加全局CSS规则，利用更具体的选择器提升优先级：

.lexical-editor:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

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