TS2741: Property value is missing in type { children: Element; } but required in type ChakraProviderProps provider.d.ts(4, 5): value is declared here

はじめに

• chakra-uiでスタイリングしたことはあるが、初期設定はしたことがなかった（個人で使う場合はoocssが好きなのでbootstrapやtailwindが多かった）

問題

• chakra-uiがきかない

IDEのエラー

TS2741: Property value is missing in type { children: Element; } 
but required in type ChakraProviderProps provider.d.ts(4, 5): 
value is declared here

ブラウザのエラー

@chakra-ui_react.js?v=f6602529:2097 Uncaught 
TypeError: Cannot read properties of undefined (reading '_config')

解決

• 以下のようにして解決

import { Button, ChakraProvider, defaultSystem } from "@chakra-ui/react";

function App() {
  return (
    <ChakraProvider value={defaultSystem}>
      <Button>チャクラ</Button>
    </ChakraProvider>
  );
}

export default App;

終わりに

• v2まではthemeとしてオプショナルになっていた値のようだ
• 規定を使っているのか、自作のsystem（CSSなどプロジェクト固有の動かせるデザインシステム）を使っているのか明示的になるので色々メリットがありそう
  • 初期は結局defaultになるけど、後から自作して渡すためのインターフェースがある
  • デザインシステム周りのルールをコード上で明示できる

defaultSystemについて

自作のsystemについて

公式のinstallation