はじめに

Chakra UI Ver3.33.0をアプリ開発時に導入した結果エラーがおこりました。
今回はextendThemeを使用した際に発生しました。

前回の記事はこちら

問題

アプリ開発にあたりChakra UI Ver3.33.0を導入することになりました。
extendThemeを使用して全体の表示をきれいにしようと試しました。
そのさい、以下のコードを作成しました。

theme

import { extendTheme } from "@chakra-ui/cli";

const theme = extendTheme({
  styles: {
    body: {
      backgroundColor: "gray.100",
      color: "gray.000",
    },
  },
});
export default theme;

Module '"@chakra-ui/cli"' has no exported member 'extendTheme'.typescript(2305)

解決方法

エラー文を確認するとexendThemeがないと表示されています。
extendThemeは使われていないので、別の表現に変更されていました。

theme

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

const theme = defineConfig({
  globalCss: {
    "html, body": {
      bg: "gray.100",
      color: "gray.800",
    },
  },
});
export const system = createSystem(defaultConfig, theme);

App

import { Button, ChakraProvider, defaultSystem } from "@chakra-ui/react";
import { system } from "./theme/theme";

export default function App() {
  return (
    <div className="App">
      <ChakraProvider value={system}>
        <Button colorScheme="teal">ボタン</Button>
      </ChakraProvider>
    </div>
  );
}

エラーは解消されました。

おわりに

Ver管理は大変です。2回目

参考