Chakra UI与react-split-pane搭配使用页面空白无报错问题求助

该问题是Chakra UI的全局样式重置和react-split-pane的依赖样式冲突导致的，具体有两个触发点：

• ChakraProvider默认会启用全局CSS重置，将所有元素的box-sizing统一设置为border-box，而react-split-pane的内部尺寸计算逻辑依赖box-sizing: content-box的盒模型，计算异常后会导致组件渲染高度为0
• Chakra的全局重置会将html、body的默认margin置为0，如果你没有给SplitPane的父容器设置显式高度，SplitPane的默认高度适配逻辑也会失效，最终表现为页面空白且无报错

方案1：关闭Chakra的全局CSS重置 #

适合不想修改react-split-pane相关样式，且项目不依赖Chakra默认重置样式的场景，只需给ChakraProvider添加resetCSS={false}属性即可：

<ChakraProvider resetCSS={false}>
  <SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
    <div>123</div>
    <div>456</div>
  </SplitPane>
</ChakraProvider>

方案2：手动添加兼容样式（更推荐） #

不修改Chakra的默认配置，仅针对react-split-pane添加适配样式，不会影响其他组件的正常表现：

import React from "react";
import { ChakraProvider } from "@chakra-ui/react"
import SplitPane from "react-split-pane";

export function Test() {
  return(
    <ChakraProvider>
      {/* 外层容器设置显式高度，可根据业务需求调整为对应尺寸 */}
      <div style={{ width: '100%', height: '100vh' }}>
        <SplitPane 
          split="vertical" 
          minSize={200} 
          defaultSize={200} 
          maxSize={400}
          {/* 手动指定盒模型适配组件内部计算逻辑 */}
          style={{ boxSizing: 'content-box' }}
        >
          <div>123</div>
          <div>456</div>
        </SplitPane>
      </div>
    </ChakraProvider>
  )
}

如果修改后仍有样式异常，可以全局覆盖react-split-pane内部元素的样式，将.Pane、.Resizer等相关类的box-sizing属性统一设置为content-box即可。

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