【React】Chakra UI 使ってみた

React

まずは、何はともあれinstall

Getting Started
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で囲う必要があります。

この辺りはリファレンスの通りですね。

Getting Started
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;

以上、基本的な使い方です!

コメント

タイトルとURLをコピーしました