無法隱藏由詞法庫生成的輸入框生成的p標(biāo)記的焦點邊框

我想隱藏使用詞法庫生成的輸入框的邊框 我嘗試過用開發(fā)者工具添加css屬性，但是沒有效果

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

// Lexical React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
    const [editor] = useLexicalComposerContext();

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

    return null;
}

// Catch any errors that occur during Lexical updates and log them
// or throw them as needed. If you don't throw them, Lexical will
// try to recover gracefully without losing user data.
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>
    );
}

我嘗試過在主題中傳遞樣式，也在組件中傳遞樣式，我做錯了什么？

這是一個輪廓，而不是一個邊界:

<ContentEditable style={{ outline: 'none' }} />