ピン留めされたアイテム

Chakra UIの設計原則

Chakra UI is established on principles that keep its components fairly consistent. Understanding these concepts will help you better contribute to Chakra UI.

Chakra UI公式ドキュメントの設計原則のページでは、Chakra UIがそのコンポーネントを比較的一貫したものに保つことが大切な考え方に基づいていることが説明されている。

dev8

Next.jsにChakra UIを導入

1. Chakra UIをインストール

プロジェクトのルートディレクトリで以下のコマンドを実行しChakra UIをインストールする。

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

dev8

2. Chakra UIを利用できるようにする

ChakraProviderを使ってChakra UIのコンポーネントを利用できるように設定する。

// pages/_app.js

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

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

dev8

3. 使う

これでNext.jsのアプリでChakra UIを使えるようになったので、こんな風にコードを書く。

// pages/index.js

import { Heading, Button } from "@chakra-ui/react";

export default function Home() {
  return (
    <div>
      <Heading>Welcome to Chakra UI</Heading>
      <Button colorScheme="blue">Get Started</Button>
    </div>
  );
}

dev8

公式ドキュメント

結局は公式ドキュメントが一番役に立つ。

CSSを指定するのが簡単すぎて今までHTMLとCSSをそのまま書いていたのが信じられません。
個人的にApp Routerを使っても使っていなくても使えるのが便利だと感じました。

このスクラップは6ヶ月前にクローズされました