css 隐藏使用Facebook的词法库创建的输入框的焦点边框

d5vmydt9  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(98)

无法隐藏由词法库

生成的输入框生成的p标记的焦点边框
我想隐藏使用词法库生成的输入框的边框,我已经尝试过使用开发工具添加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>
    );
}

我尝试过在主题中传递样式,也尝试过在组件中传递样式,我做错了什么?

e0bqpujr

e0bqpujr1#

它是一个轮廓,而不是边界:

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

相关问题