Chakra-uiでグローバルなスタイルを設定する方法

はじめに

CSSフレームワークであるChakra-uiの機能について記事にします。

グローバルなスタイルを設定する

グローバルなスタイルとは、アプリケーション全体を通して設定する共通のスタイルのことです。
例えば文字の色や背景色などです。

CSSフレームワークであるChakra-uiを使うと、すごく簡単にグローバルスタイルが設定できます。

/* Theme.tsx */

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

export const theme = extendTheme({
  styles: {
    global: {
      body: {
        backgroundColor: "gray.100",
        color: "gray.800"
      }
    }
  }
});

chakra-uiには、extendThemeというものがあり、 その中で styles->global->bodyと階層を作り、最終的にbodyの中でグローバルなスタイルに適用したいCSSを記入します。

このextendThemeを、自分で宣言した定数（今回はtheme）に代入し、コンポーネント化します。

/*App.tsx*/

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

import { theme } from "./Theme";

export default function App() {
  return (
    <ChakraProvider theme={theme}>
    </ChakraProvider>
  );
}

そして、themeをメインのファイル内でインポートし、上記のようにreturnの中身全体をで囲みます。 ChakraProviderもchakra-uiが用意してくれているもので、で囲んだ中で初めてchakra-uiの様々な機能が使えるようになります。
最後に、ChakraProviderのthemeという引数に、インポートしておいたthemeを渡します。

すると、グローバルなスタイルが全体に反映された状態で、後の開発が行えます。