即使导入样式表，Draftjs也不会显示

问题描述 投票：0回答：1

我需要在我的项目中使用Draft-js。我按照官方文档中的说明进行操作。我导入了样式表，但未显示。

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js'
 import 'draft-js/dist/Draft.css'
        const MyComponent: React.FC<MyComponentProps> = () => {
            const [editorState, setEditorState] = React.useState(() => EditorState.createEmpty());
            return (
         
           <Editor editorState={editorState} onChange={setEditorState} />
             
            )
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是它的渲染方式（我自己在检查工具中添加了背景色）。

enter image description here

有人有什么解决方法吗？

reactjs material-ui draftjs react-typescript
1个回答
0
投票

请尝试以下方式：

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';

function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  return <Editor editorState={editorState} onChange={setEditorState} />;
}

ReactDOM.render(<MyEditor />, document.getElementById('container'));

此外，HTML文件的<head></head>块中必须具有以下元标记：

<meta charset="utf-8" />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.