ChakraUIのv3による変更点

はじめに

ChakraUIのバージョンが3にアップデートされたので、バージョン2以前との変更点をまとめます。

主な変更点

1. @emotion/styledとframer-motionのパッケージは不要

既にインストールしていた場合は、アンインストールする。

npm uninstall @emotion/styled framer-motion

そして、パッケージの最新化を行う。

npm install @chakra-ui/react@latest @emotion/react@latest

2. cli snippetをインストールすることで、補完してくれる

npx @chakra-ui/cli snippet add

Node.jsのバージョン18の場合は、上記のコマンドを実行しても@/components/ui/*をimportできませんでした。
そのため、Node.jsのバージョンを22にアップデートして、再度上記のコマンドを実行するとimportが行えました。

3. テーマのカスタマイズ構成に、defaultConfigを使用する

theme.ts

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

- export const theme = extendTheme({
-  fonts: {
-    heading: `'Figtree', sans-serif`,
-    body: `'Figtree', sans-serif`,
+ export const system = createSystem(defaultConfig, {
+  theme: {
+    tokens: {
+      fonts: {
+        heading: { value: `'Figtree', sans-serif` },
+        body: { value: `'Figtree', sans-serif` },
+     },
+    },
  },
})

4. Providerを使用する

ChakraProviderは使わなくなり、Providerをルートに設定することとなった。

App.tsx

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

export const App = ({ Component }) => (
- <ChakraProvider theme={theme}>
+ <Provider value={defaultSystem}>
    <Component />
- </ChakraProvider>
+ </Provider>
)

5. アイコンの変更

@chakra-ui/iconsのパッケージが削除され、lucide-reactまたはreact-iconsを使用する。

6. プロップの変更

• bool型プロパティの命名規則がisOpenからopenに変更。
• colorSchemeからcolorPaletteに変更され、すべてのコンポーネントで使用できるようになった。
• スタイルプロパティの命名規則の変更。noOfLinesからlineCampへなど。

..etc

おわりに

他にも様々な変更点がありました。
まだアップデートされたばかりで、追いきれていないことろも多々ありますが、使用していくにつれ関係のある箇所から加筆していければと思います。

参考サイト