Chakra UI v3.x.xでextendThemeが利用できなかった話

環境

@chakra-ui/react 3.17.0
react 19.1.0

node.js：20.0.0

起きたこと

グローバルなスタイルの設定をしようと、extendThemeをimportしようとしたところ、下記エラー発生。

Module ‘”@chakra-ui/react”‘ has no exported member ‘extendTheme’

原因（バージョンの違いによる原因）

グローバルなスタイル設定を行う際、extraThemeを使うのは、Chakra UIのバージョンが v2.x.x のとき。
今回インストールしたChakra UIのバージョンは v3.x.x だったので、extraThemeではなく、違う書き方が必要だった。

v2.x.xでの書き方

theme.ts

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

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

App.tsx

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

export const App = ({ Component }) => (
  <ChakraProvider theme={theme}>
    <Component />
  </ChakraProvider>
)

theme.tsで定義したthemeオブジェクトを、ChakraProviderコンポーネントのthemeというpropsに渡す。

v3.x.xでの書き方

theme.ts

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

const config = defineConfig({
  globalCss: {
    "html, body": {
      bg: "gray.100",
      color: "gray.800",
    },
  },
});

export const system = createSystem(defaultConfig, config);

provider.tsx

"use client"

import { ChakraProvider } from "@chakra-ui/react"
import { system } from "../../theme/theme"
import { ThemeProvider } from "next-themes"

export function Provider(props: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={system}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
      {props.children}
      </ThemeProvider>
    </ChakraProvider>
  )
}

App.tsx

import { Provider } from "@/components/ui/provider"
import { defaultSystem } from "@chakra-ui/react"

export const App = ({ Component }) => (
  <Provider>
    <Component />
  </Provider>
)

• v3では extendTheme は使用できず、代わりに createSystem, defineConfig, defaultConfig をインポートする。
• defineConfig で定義。 globalClass で文字通りグローバルなスタイルの設定ができる。
• ChakraProviderコンポーネントには、valueというプロパティへ渡す。

参考

• 以下の公式ドキュメントを参照しました。使用するパッケージなども少し違うので参照した方がよいかと思います。