PR

Chakra UI V3でextendThemeが利用できない場合の対処方法

スポンサーリンク
スポンサーリンク

エラー内容

Chakra UI Version 2(以後V2) のサンプルコードをVersion 3(以後V3)を利用して書き直そうとしていると、

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

というエラーが発生しました。

スポンサーリンク

エラーの原因

V2で利用していたextendThemeが、V3では利用できなくなっています。

スポンサーリンク

解決方法

以下のV3へのMigrationに関する公式ドキュメントにある通り、修正が必要になります。

Refactor Custom Theme
Move your custom theme to a dedicated theme.js or theme.ts file. Use createSystem and defaultConfig to configure your theme.

カスタムテーマをリファクタリングしてください。theme.jsファイルでcreateSystem  defaultConfigを使ってあなたのテーマを設定してください。

https://www.chakra-ui.com/docs/get-started/migration#refactor-custom-theme

大きく2点の修正が必要になります。

  • インポートするモジュールの変更
    • extendThemeのインポートの代わりに、createSystem, defaultBaseConfig, defineConfigをインポートし、それらを利用してカスタムテーマを定義
  • プロバイダーのプロパティを変更
    • themeからvalueへ

以下でどう修正すればいいか、サンプルを紹介します。

修正のサンプル

公式ドキュメントに、V3でのテーマのカスタム方法が記載されています。

V2とV3のサンプルコードを元に、コード差分を見ていきます。

V2 での記載

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"

// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      // ...
      900: "#1a202c",
    },
  },
})

// 3. Pass the new theme to `ChakraProvider`
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

// 4. Now you can use these colors in your components
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

※赤文字は、V3に移行する際に修正が必要となる箇所です。

お馴染みの、extendThemeで書かれたV2のコードです。公式に記載のコードをお借りしています。

V3との差分は以下です。

V3 での記載

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

const customConfig = defineConfig({
  theme: {
    colors: {
      brand: {
        500: "tomato",
      },
    },
  },
})

export const system = createSystem(defaultBaseConfig, customConfig)

まず、extendThemeのインポートの代わりに、createSystem, defaultBaseConfig, defineConfigをインポートします。

それらを以下のように利用して設定を行います。

defineConfigで、これまでextendThemeで実装していた設定を書くことができます。オブジェクトの指定で「theme」という階層が増えています。

createSystemを使って、defaultBaseConfigと、追加の設定を用いてカスタムテーマを定義することができます。

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

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

プロバイダーに対して、valueというプロパティで先ほど定義したカスタムテーマを渡すことで反映できます。

Customization | Chakra UI
Learn how to customize the Chakra UI theme

より詳しい設定については公式ドキュメントをご覧ください。

スポンサーリンク

まとめ

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

のエラーの原因の一つとして、V2とV3の差分が考えられます。

extendThemeがV3では利用できないため、V3へのMigrationに関する公式ドキュメントに沿って移行を行う必要があります。

コメント

error: Content is protected !!