如何让BlockNoteView组件填满父容器的高度？

你在React项目中使用<BlockNoteView>渲染编辑器时，遇到了无法让它填满父容器完整高度的问题，你的布局代码如下：

<div className="flex h-screen">
  {/* Left-side BlockNote editor */}
  <div className="w-1/2 h-full p-0 m-0 overflow-hidden border-r">
    <div className="h-full">
      <BlockNoteView
        editor={editor}
        className="h-full"
      />
    </div>
  </div>
</div>

可以通过以下几种方案解决：

• 强制覆盖BlockNote内部样式
  BlockNote的内部组件可能自带固定高度或min-height样式，需要通过CSS强制覆盖：

  /* 在全局样式或组件CSS模块中添加 */
  .blocknote-editor {
    height: 100% !important;
    display: flex;
    flex-direction: column;
  }
  
  .blocknote-editor .blocknote-content-container {
    flex: 1;
    overflow-y: auto;
  }
  

  确保<BlockNoteView>的className正确传递，或者直接针对BlockNote的默认类名设置样式即可。

• 调整父容器的Flex布局属性
  给包裹<BlockNoteView>的父容器添加Flex布局，让编辑器自动填充剩余空间：

  <div className="flex h-screen">
    {/* Left-side BlockNote editor */}
    <div className="w-1/2 h-full p-0 m-0 overflow-hidden border-r">
      <div className="h-full flex flex-col">
        <BlockNoteView
          editor={editor}
          className="flex-1"
        />
      </div>
    </div>
  </div>
  

  将内层的h-full替换为flex flex-col，再给<BlockNoteView>设置flex-1，即可让它自动填充父容器的剩余高度。

• 配置编辑器初始化参数
  部分版本的BlockNote支持在初始化编辑器时设置高度相关配置，你可以尝试在创建editor实例时添加：

  const editor = createBlockNote({
    // 其他配置项
    editorProps: {
      style: {
        height: "100%"
      }
    }
  });
  

内容的提问来源于stack exchange，提问作者plznobug