无法隐藏由词法库
生成的输入框生成的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>
);
}
我尝试过在主题中传递样式,也尝试过在组件中传递样式,我做错了什么?
1条答案
按热度按时间e0bqpujr1#
它是一个轮廓,而不是边界: