chakra-ui v3のProviderが効かない

はじめに

• v3系

問題

• 今まで以下のようにしていたが、公式を見るとProviderを読み込むべきだったようなので、そのようにしたがインポートできない

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

function App() {
  return (
    <ChakraProvider value={userDefSystem}>
      <Hogehoge />
    </ChakraProvider>
  );
}

export default App;

解決

• npx @chakra-ui/cli snippet add を実行した時に作成されたコンポーネントをimportして解決

import { Provider } from "./components/ui/provider.tsx";

createRoot(document.getElementById("root")!).render(
  <Provider>
    <Hogehoge />
  </Provider>,
);

終わりに

• 手順を飛ばさずやれば問題なく実施できた