Chakra UI 不适用于 react-split-pane

如何解决Chakra UI 不适用于 react-split-pane

我正在使用 chakra-ui 和 react-split-pane。

如果我使用一个或另一个，它会工作得很好。如果我一起使用，页面是空白的，没有控制台错误消息。这是三个示例。

一起使用它们：

代码沙盒：https://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js

// Doesn't work,page is blank w/ no error message.

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

export function test() {
    return(
        <ChakraProvider>
            <SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
                <div>123</div>
                <div>456</div>
            </SplitPane>
        </ChakraProvider>
    )
}

ReactDOM.render(
    <Test />,document.getElementById("root")
);

仅使用 react-split-pane：

// Works perfectly

export function test() {
    return(
         <SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
             <div>123</div>
             <div>456</div>
         </SplitPane>
    )
}

仅使用 chakra-ui：

// Works perfectly

export function test() {
    return(
        <ChakraProvider>
             <div>123</div>
             <div>456</div>
        </ChakraProvider>
    )
}

对这里可能发生的事情有什么想法吗？

我在 webpack 中使用 React+Typescript。