【Vite × React × Typescript】Chakra UI v3でグローバルなCSSをあてる方法

はじめに

お疲れ様です、りつです。

今回はChakra UIのv3でグローバルCSSを適用する方法を調べたので、備忘録も兼ねて残しておこうと思います。

前提

Viteで作成したReact × Typescriptのプロジェクトで実装しています。

また、Chakra UIのインストールは終わっている前提で記載しております。

※ Vite × React環境へのChakra UI v3のインストール方法については以下の記事もご参照ください。

方法

手順1：テーマ設定用の新規ファイルを追加

globalCss is used to apply global styles to the system.

src/theme/theme.ts

import { createSystem, defaultConfig } from "@chakra-ui/react"

const theme = createSystem(defaultConfig, {
  globalCss: {
    "html, body": {
      backgroundColor: "gray.200",
      color: "gray.500",
    },
  },
})

export default theme;

手順2：ChakraProviderに作成したテーマを指定

If you have a custom theme, replace defaultSystem with the custom system

公式ドキュメントのサンプルコードだと<Provider>に対してvalue属性を指定していますが、同じ書き方をするとエラーになってしまいました。
以下のページを参考に<Provider>内部の<ChakraProvider>のvalue属性を修正することで対応しています。

update the ChakraProvider to use the custom system.

変更前のソースコード

src/components/ui/provider.tsx

"use client"

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "./color-mode"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

変更後のソースコード

src/components/ui/provider.tsx

"use client"

import { ChakraProvider } from "@chakra-ui/react"
import theme from "@/theme/theme" // 作成したテーマをインポート
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "./color-mode"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={theme}> {/* 作成したテーマでdefaultSystemを置き換える */}
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

補足：App.tsxの内容

src/App.tsx

import { Button } from "@/components/ui/button"
import { HStack } from "@chakra-ui/react"

function App() {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
      <p>テスト文字</p>
    </HStack>
  )
}

export default App

変更前後の画面

変更前

変更後

おわりに

現在参考にしている学習動画がChakra UIのv2を使用していたので、v3でどうやって記述するかを調べました。

v2とv3では他にも書き方が変わっている部分が多いようなので、気をつけながら学習を進めていこうと思います。

参考