Draft.js headers 未正确呈现

Question

我有一个安装了 tailwind 的 next.js 环境和一个简单的 draft.js 文本编辑器。在我的工具栏组件中，我切换内联样式和块样式。一切正常，除了当我将块类型设置为 header-one、header-two 等时没有渲染。我记录了编辑器状态并且块类型已正确设置为块，但没有任何反应。疯狂的是，它适用于 unordered-list-item 和 ordered-list-item.

为了简单起见，我添加了一个 Test-Button，它应该可以工作，但没有。非常感谢任何帮助我走上正轨的帮助！

export default function TextEditor({data}) {
    const [blockData, setBlockData] = React.useState(data)  
    const rawContent = data.textBlockText
    const [editorState, setEditorState] = React.useState(
        () => rawContent? EditorState.createWithContent(convertFromRaw(JSON.parse(rawContent))) :  EditorState.createEmpty(),
    );

    const handleFormatChange = (event) =>{
        setEditorState(RichUtils.toggleBlockType(editorState, "header-one"))
    }

    return (
        <div className="h-full">
            <div className="w-full py-4 flex flex-row px-8">
                <Toolbar editorState={ editorState } setEditorState={ setEditorState } />
            </div>

            <div className="w-full p-4 border-gray-500 border-2 mt-10 lg:w-1/2 lg:mx-auto">
                <Editor
                    editorState = {editorState}
                    onChange = {setEditorState}
                />
            </div>
            <button onClick={e => handleFormatChange ("header-one")}>Test Button</button>
        </div>
    )
}

Answer 1

检查 h1、h2 等样式是否未被覆盖。

例如，Tailwind CSS 使所有 h1、h2 等样式相同，您必须在 globals.css 文件中添加如下内容：

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: revert;
    font-weight: revert;
  }
}

Draft.js headers 未正确呈现

Draft.js headers do not get rendered properly

reactjs

draftjs

next.js