Chakra UI V2のスタイリングが効かない件【ChakraProvider】

問題

Chakra UI V2をインストールし、Spinnerコンポーネントを使用した際に、ブラウザに表示されているSpinnerコンポーネントにスタイリングが効いていない

解決方法

公式ドキュメント

公式ドキュメントを見たらルートファイルにChakraProviderコンポーネントで囲むように記載がありました。

この作業をせずに、単純にChakra UIのコンポーネントを使用したいファイル内でインポートするだけではスタイリングが当たらないようです。

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コンポーネントで囲む
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

まとめ

答えは公式ドキュメントの冒頭に記載されていました。
まずは落ち着いて、公式ドキュメントを読むのが近道ですね。