ReactでChakraUIのスタイルが効いていない

はじめに

Chakraを利用してReact開発を行おうと導入したところつまずいたのでまとめます

問題

ChakraUIを導入したのですが、などを利用してもCSSが効いておらず、ボタンはでているもののシンプルなボタンしか表示されませんでした

解決方法

公式のスタートページを読み飛ばしていました

App.jsx

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

<ChakraProvider>で利用するコンポーネントを囲む必要がありました
囲んでいないのでCSSが効いていないのは当然かなというところで凡ミスでした

おわりに

なんとなくの記憶たどりの手順で導入をするとどこかのステップを忘れてしまうこと実感しました
調べても出てこなかったのでなかなか時間を取られました