エラー内容
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 dedicatedtheme.js
ortheme.ts
file. UsecreateSystem
anddefaultConfig
to configure your theme.カスタムテーマをリファクタリングしてください。
https://www.chakra-ui.com/docs/get-started/migration#refactor-custom-themetheme.js
ファイルでcreateSystem
とdefaultConfig
を使ってあなたのテーマを設定してください。
大きく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というプロパティで先ほど定義したカスタムテーマを渡すことで反映できます。
より詳しい設定については公式ドキュメントをご覧ください。
まとめ
Module ‘”@chakra-ui/react”‘ has no exported member ‘extendTheme’
のエラーの原因の一つとして、V2とV3の差分が考えられます。
extendThemeがV3では利用できないため、V3へのMigrationに関する公式ドキュメントに沿って移行を行う必要があります。
コメント