2023/02/19

Chakra UIの基本的な使い方

CSS React

スポンサードサーチ

Chakra UIとは

UIコンポーネントライブラリです。

Chakra UIで用意されたコンポーネントを組み合わせることでUIを作成します。

そのため、以下のようなメリットがあります。

1からCSSを書かなくてもUI作成できる
一貫性のあるUI作成ができる

用意されたものでスタイリングするため、SassやTailwindCSSと比べて自由度は低いですが、それが許容できるのであればオススメできると思います。

Chakra UIの導入

公式ドキュメントに従ってChakra UIを導入します。（Next.jsを前提とします）

まずはターミナルで以下のコマンドを実行します。

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

続いてルートのファイル（_app.tsx）にChakraProviderをセットします。

import type { AppProps } from 'next/app'
// 1. ChakraProviderをimportする
import { ChakraProvider } from '@chakra-ui/react'

export default function App({ Component, pageProps }: AppProps) {
  // 2. ChakraProviderでWrapする
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

これで基本的な導入は完了です。

スポンサードサーチ

使用例

以下のかんたんなカード風コンポーネントをChakra UIで作成してみます。

コード例

// Chakra UIのコンポーネントをimportする
import { Box, Image, VStack, Text, HStack, Link } from '@chakra-ui/react'
import cat from 'public/cat.jpg'

export default function Home() {
  return (
    <VStack m={'30px'} maxW={'300px'} boxShadow={'xl'}>
      <Box>
        <Image src={cat.src} />
      </Box>
      <VStack>
        <Text fontSize={'2xl'} fontWeight={'bold'}>
          カードタイトル
        </Text>
        <Text p={'0px 10px'} color={'gray.500'}>
          あなた方は、どちらからおいでですかジョバンニは胸をおどらせて言いました。みんなほんとうに別れが惜しそうで、そのマジェランの星雲だ。
        </Text>
      </VStack>
      <HStack color={'blue.400'}>
        <Link href='/'>HOME</Link>
        <Link href='faq'>FAQ</Link>
      </HStack>
    </VStack>
  )
}

今回使用したコンポーネントについて補足していきます。