サムネイル

Next.jsでChakra UIを使ってみる。

2024年01月04日に公開

2024年01月04日に更新

明けましておめでとうございます。今年もよろしくお願いします！！ってことで今年初めてのブログはChakra UIです。
https://chakra-ui.com/

以下の環境でChakra UIを使用しています。

Next.js : 14.0.3
React : 18.0.0

対象者

Chakra UIって何？美味しいの？って状態の方。
Chakra UIを使ったことがない方。
Chakra UIを使ってみたい方。

インストール

Chakra UIを使うためのモジュール群をインストールします。

$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

Chakra UIはemotionとframer-motionに依存しているっぽいのでこれらも併せてインストールします。

準備

Chakra UIを使うためには、最も階層が上位（この場合、app/layout.tsx）に<ChakraProvider /> を設置する必要があります。必ずChakra UIを利用する際にはこのProviderを設定するようにしてください。

// app/layout.tsx
・・・
import { ChakraProvider } from "@chakra-ui/react"; // 追加
・・・

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ChakraProvider>{children}</ChakraProvider> {/* <ChakraProvider />でラップする。 */}
      </body>
    </html>
  );
}

ここまでくると、Chakra UIが使えますので実際に使っていきたいと思います。

// app/page.tsx
import { Heading } from "@chakra-ui/react";

export default function Home() {
  return (
    <Heading color={"red"} fontSize={"64px"}>
      Next.js × Chakra UI
    </Heading>
  )
}

ちなみに、ブラウザ上では<h2>でレンダリングされます。

基本となるスタイルの付け方

Chakra UIでは、styled-systemを基礎としている部分があるという特徴があるので、コンポーネントのpropsに直接style属性を記述することでスタイリングします。

<Box
  width={"100px"}
  height={"100px"}
  backgroundColor={"blue"}
  borderRadius={"50%"}
  padding={"8px"}
  margin={"8px"}
></Box>

スタイルのショートハンドラ

styleの値にはさまざまなショートハンドラが用意されています。padding ならp、margin ならmです。

<Box
  w={"100px"}
  h={"100px"} 
  bgColor={"blue"}
  rounded={"50%"}
  p={"8px"} 
  m={"8px"}
></Box>

また、縦方向・横方向をまとめて指定するpy(padding-top/padding-bottom)・px(padding-left/padding-right) 、my(margin-top/margin-bottom)・mx(margin-left/margin-right) ことができます。

<Box px={"10px"} my={"10px"}>・・・</Box>

何だかこの辺りはTailwindCSSに近しい感じがしますね。

Theme

Chakra UIにも他のUIライブラリみたいにTheme機能があります。ここでは、デフォルトのTheme機能について解説します。
https://chakra-ui.com/docs/styled-system/theme

色のThemeの使い方

色のThemeに関しては色.50、100~900 のような指定で、50と100〜900の100刻みで計10段階あり、50が一番薄く900が一番濃いと言う感じです。https://chakra-ui.com/docs/styled-system/theme#colors

<Box backgroundColor={"red.50"} borderColor={"blue.200"} color={"yellow.800"}>・・・</Box>

サイズ関連の使い方

font-size、letter-spacingなどのフォント系

https://chakra-ui.com/docs/styled-system/theme#typography

// 7xl = 72px
<Heading fontSize={"7xl"}>
  Next.js × Chakra UI
</Heading>

margin、padding

https://chakra-ui.com/docs/styled-system/theme#spacing

// 2=0.5rem=8pxのpaddingが付く。
<Box p={2}>・・・</Box>

// そのまま2pxのpaddingが付く。
<Box p={"2px"}>・・・</Box>

width、height

https://chakra-ui.com/docs/styled-system/theme#sizes

<Box 
  w={"full"} // full=100%
  h={100} // 1=1pxなので、100=100px
>・・・</Box>

レスポンシブ

propsの値に配列またはオブジェクトを渡すだけでレスポンシブすることができます。
https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax

<Box bg={["red.500", "yellow.500", "green.500", "blue.500"]} >
  ・・・
</Box>

このように、配列を渡すことでレスポンシブを指定することができます。
配列を渡した場合、左に書いた値がsmその右の値がmd、lgそして一番右の値がxlとなっています。

sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px

https://chakra-ui.com/docs/styled-system/theme#breakpoints

また、以下のようにオブジェクトを使って表現することもできます。

<Box bg={{ base: "red.500", sm: "yellow.500", md: "green.500", lg: "blue.500" }} >
  ・・・
</Box>

疑似要素

疑似要素を指定する場合、_before 、_after のように指定します。

<Box _before={{ content: "", ・・・ }}　_after={{ content: "", ・・・ }}>・・・</Box>

hoverの時も同様に_hoverと指定します。

<Heading color={"red"} fontSize={"7xl"} _hover={{ color: "blue" }}>
  Next.js × Chakra UI
</Heading>

最後に

今回はChakra UIの基本的な使い方についてご紹介しました。
大体この辺りを押さえておくといいかんじにChakraライフを過ごせるのではないかと思います。他に足りない部分であったり応用的な使い方などについてはタイミングが合えば、また書きたいと思います。

T.W