Chapter 04無料公開

基礎となるスタイルの付け方・Boxコンポーネントについて

terrierscript
terrierscript
2021.05.07に更新

Boxの基礎

まずChakra UIでの最もプリミティブなコンポーネントは<Box>になります。
表示上はほとんど<div>と変わらないと思って構いません。
これが汎用的なコンポーネントの基礎となり、様々な恩恵をChakra UIから受ける事が出来ます。

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

<Box>Hello</Box>

ここから、<Box>を利用してstyleについて説明していきます。

Styleの付け方

Chakra UIの大きな特徴として、styled-systemを基礎としている部分があります。[1]
これはコンポーネントのpropsの値に直接style属性を書くことでスタイリングを可能とするものになります

<Box padding={10} backgroundColor="red">Hello</Box>

このおかげで、Tailwind.cssのようなUtility Firstに近いスタイリングが可能となります[2]
特にChakra UIはTailwind inspiredを明示している部分も多くあります。

styleのショートハンド

styleの値は様々ショートハンドが用意されており、paddingpmarginmなど様々が用意されています。

<Box p={10}>Hello</Box>

縦方向・横方向をまとめて指定するpx/pymx/myというショートハンドなども利便性が高いです

// px = x方向のpadding / my = y方向のmargin
<Box px={10} my={10}>Hello</Box>
脚注
  1. Chakra UIはstyled-systemに依存しておらず、@chakraui/styled-systemを別途実装しています ↩︎

  2. ただし、Chakra UIもstyled-sytemもUtility Firstとは名乗っていないようです ↩︎