【React】Chakra UI 使ってみた

2022.03.272021.12.19

CSSフレームワークの中で、最近勢い（人気）のある、Chakra UIを使ってみましたので、使い方をまとめました。

まずは、何はともあれinstall。

install方法はこちらの公式ドキュメントに記載されています。

Installation

How to install and set up Chakra UI in your project

installすると何が変わるんでしょう？？

package.jsonファイルを確認すると以下の4つか追加されていることが確認できます。

    "@chakra-ui/react": "^1.7.3",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",

    "framer-motion": "^4.1.17",

ボタンの追加とglobalなstyleを適用してみます。

目標物

Chakra UI 使用の基本

ルートのコンポーネントで全体をChakraProviderで囲う必要があります。

この辺りはドキュメントの通りですね。

Installation

How to install and set up Chakra UI in your project

ボタンの追加

ボタンを追加してみます。

import { Button, ChakraProvider } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <Button colorScheme="teal">ボタン</Button>
    </ChakraProvider>
  );
}

export default App;

Buttonタグを使用して、Buttonをimportするのみです。

globalにstyleを適用する

アプリ全体の背景色や、ベースとなる色を設定します。

Customize Theme

How to modify Chakra UI's default theme

こちらを基に色を設定します。

Default Theme

The default chakra theme tokens

色の指定はこちらを基にしてます。

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

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

これを、他のコンポーネントで使用できるようthemeをexport

作成したthemeをApp.tsxのChakraProviderに記述して呼び出します。

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

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Button colorScheme="teal">ボタン</Button>
    </ChakraProvider>
  );
}

export default App;

以上、超基本的な使い方についてでした！

ご覧いただきありがとうございました。