TypeScriptにChakraUIをインストール

flabaka

ChakraUIをインストール

インストール方法などは、以下のページに詳しく書かれています。

create-react-appで作成したプロジェクトに、ChakraUIを追加してみます。

何故ChakraUIかというと、単に使ってみたかったからです。

yarnを使って色々インストール。

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

App.tsxにChakraProviderの設定を行います。

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

function App() {
  return (
    <ChakraProvider>
      <p>ChakraUIのテスト</p>
    </ChakraProvider>
  );
}

Getting Startedのページの下の方に書かれていますが、TypeScriptのプロジェクトでChakraUIを使う場合には、TypeScriptのバージョンは4.1.0以上が必要みたいです。

Themeをカスタマイズしてみる

テーマのカスタマイズ方法は、以下のページに詳しく書かれています。

themeフォルダを作成して、その中にテーマファイルを作成する方がいいみたいに書かれているので、themeフォルダ内にtheme.tsを作成し、以下を記述します。

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

const theme = extendTheme({
    styles: {
      global: {
        "body": {
          fontSize: "md",
          backgroundColor: "gray.600",
          color: "white",
        }
      },
    },
  })

  export default theme;

App.tsxファイルを編集し、作成したテーマを適用させます。

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

function App() {
  return (
    <ChakraProvider theme={theme}>
      <p>ChakraUIのテスト</p>
    </ChakraProvider>
  );
}

作成したテーマが適用されました。


© 2021 flabaka.com