javascript - React chakra ui キャンバスの幅と高さをゼロに初期化してレンダリングできませんか?

Question

これがコードサンドボックスのリンクです

そして、ここにコードがあります

import "./styles.css";
import {
  Flex,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs
} from "@chakra-ui/react";
import { SketchField, Tools } from "react-sketch";

export default function App() {
  return (
    <Flex height="100vh" width="100vw">
      <Tabs width="100%" display="flex" flexDirection="column" defaultIndex={0}>
        <TabList>
          {["Play", "Draw"].map((val) => (
            <Tab key={Math.random()}>{val}</Tab>
          ))}
        </TabList>
        <TabPanels flex="1 1 auto">
          <TabPanel padding={0} height="100%">
            <h1>Hello world </h1>
          </TabPanel>
          <TabPanel padding={0} height="100%">
            <Flex height="100%" width="100%">
              <SketchField
                width="100%"
                height="100%"
                widthCorrection={0}
                tool={Tools.Pencil}
                lineColor="#3182CE"
                lineWidth={3}
              />
            </Flex>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Flex>
  );
}

2 つのタブを使用しようとしています。最初のタブには「Hello World」が表示され、2 番目のタブにはキャンバス要素があります (私は反応スケッチを使用しています)。ただし、2 番目のタブをクリックすると、キャンバス要素がレンダリングされません。何らかの理由で、その幅と高さがゼロです。最初は、これは react-sketch の問題だと思っていたので、別のキャンバス コンポーネント (react-canvas-draw) を試しましたが、そのコンポーネントでも同じ問題が解決しません。したがって、これはおそらく Chakra UI タブがどのように機能するか、またはどのように反応して物事をレンダリングするかに関する問題です。

これを修正する方法は？キャンバスコンポーネントに「残りの高さと幅」を持たせたいので、キャンバスに残っている高さや幅がわからないため、vh や vw ではなく「100%」などを使用しています。成分。

注: ただし、defaultIndex を 1 に変更すると (つまり、最初に 2 番目のタブをアクティブにする)、canvas コンポーネントが機能することに気付きました。なぜこれが機能し、他の方法が機能しないのかわかりません。