【React/Next.js】Chakra UI の基本的な使い方【TypeScript 対応】

はじめに

Chakra UI の導入方法については、以下の記事にまとめています。
参考：Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法 | fwywd（フュード）

基本的に Next.js の PJ をベースとして、解説しています。もし、掲載しているコードが React で動作しない場合は、ディレクトリ構造やコードを適宜、確認してください。

バージョン情報

• node：15.11.0
• react: 17.0.2
• react-dom: 17.0.1
• next: 11.1.2
• @chakra-ui/react: 1.6.7
• @emotion/react: 11
• @emotion/styled: 11
• framer-motion: 4

基本的な書き方

• グルーピングなど頻繁に使う div タグ → Box コンポーネント
• 見出しで使用する h1 ~ h6 タグ → Heading コンポーネント
• 文章を記述するための p タグ → Text コンポーネント
• button タグ → Button コンポーネント

// pages/index.tsx
import { Heading, Box, Button, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    <Box>
      <Text>テキスト</Text>
      <Heading>見出し</Heading>
      <Button>ボタン</Button>
    </Box>
  );
}

スタイリングの方法

// pages/index.tsx
import { Heading, Box, Button, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    <Box width="200px" background="gray">
      <Text color="blue" fontWeight="bold">
        テキスト
      </Text>
      <Heading>見出し</Heading>
      <Button>ボタン</Button>
    </Box>
  );
}

▼ 補完の様子

• width → w
• height → h
• background → bg

レスポンシブ対応

// pages/index.tsx
import { Heading, Box, Button, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    // 追記：横幅をレスポンシブ対応
    <Box w={{ base: '150px', sm: '300px', md: '500px', lg: '700px', xl: '1000px' }} bg="gray">
      <Text color="blue" fontWeight="bold">
        テキスト
      </Text>
      <Heading>見出し</Heading>
      <Button>ボタン</Button>
    </Box>
  );
}

• base：From 0em より大きい場合
• sm：From 30em（デフォルト値）より大きい場合
• md：From 48em（デフォルト値）より大きい場合
• lg：From 62em（デフォルト値）より大きい場合
• xl：From 80em（デフォルト値）より大きい場合

// 配列
["150px", "300px", "500px", "700px","1000px"]

// オブジェクト
{ base: '150px', sm: '300px', md: '500px', lg: '700px', xl: '1000px' }

疑似要素のスタイリング

• _before / _after
• _hover
• _focus

import { Heading, Box, Button, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    <Box>
      <Text color="blue" fontWeight="bold" _before={{ content: '"before の要素"', color: 'white' }}>
        テキスト
      </Text>
      <Heading>見出し</Heading>
      <Button>ボタン</Button>
    </Box>
  );
}

コンポーネントの html タグの変更

<Heading as="h1">h1</Heading>
<Heading as="h2">h2</Heading>
<Heading as="h3">h3</Heading>
<Heading as="h4">h4</Heading>
<Heading as="h5">h5</Heading>
<Heading as="h6">h6</Heading>

独自 CSS の記述方法

import { Heading, Box, Button, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    <Box
      sx={{
        // セレクタ
        '.vertical-mode': {
          // プロパティと値
          writingMode: 'vertical-rl',
        },
      }}
    >
      {/* sx で定義したクラス名 ".vertical-mode" を className に代入  */}
      <Heading className="vertical-mode" color="green" fontSize="7xl">
        縦文字
      </Heading>
    </Box>
  );
}

Chakra UI のようなコンポーネント定義

import { Box, Text } from '@chakra-ui/react';

export default function Index(): JSX.Element {
  return (
    <Box>
      <Text>グラデーション１</Text>
      <Box bgGradient="linear(to-r, red,blue)" w="300px" h="200px" />
      <Text>グラデーション２</Text>

      <Box bgGradient="linear(to-r, red,blue)" w="500px" h="100px" />
      <Text>グラデーション３</Text>
      <Box bgGradient="linear(to-r, red,blue)" w="200px" h="100px" />
    </Box>
  );
}

// components/GradientBox.tsx
import { Box, BoxProps } from '@chakra-ui/react';
import { ReactNode } from 'react';

// BoxProps を継承
interface Props extends BoxProps {
  children?: ReactNode;
}

export default function GradientBox({ children, ...rest }: Props): JSX.Element {
  return (
    <Box bgGradient="linear(to-r, red,blue)" {...rest}>
      {children}
    </Box>
  );
}

import { Box, Text } from '@chakra-ui/react';
import GradientBox from 'components/GradientBox';

export default function Index(): JSX.Element {
  return (
    <Box>
      <Text>グラデーション１</Text>
      <GradientBox w="300px" h="200px" />
      <Text>グラデーション２</Text>
      <GradientBox w="500px" h="100px" />
      <Text>グラデーション３</Text>
      <GradientBox w="200px" h="100px" />
    </Box>
  );
}

import { Box, Text } from '@chakra-ui/react';
import GradientBox from 'components/GradientBox';

export default function Index(): JSX.Element {
  return (
    <Box>
      <Text>グラデーション１</Text>
      {/* 別のグラデーション */}
      <GradientBox bgGradient="linear(to-r, green,blue)" w="300px" h="200px" />
      <Text>グラデーション２</Text>
      <GradientBox w="500px" h="100px" />
      <Text>グラデーション３</Text>
      <GradientBox w="200px" h="100px" />
    </Box>
  );
}

import { Box, BoxProps } from '@chakra-ui/react';
import { ReactNode } from 'react';

// Omit で bgGradient だけ除外
interface Props extends Omit<BoxProps, 'bgGradient'> {
  children?: ReactNode;
}

export default function GradientBox({ children, ...rest }: Props): JSX.Element {
  return (
    <Box bgGradient="linear(to-r, red,blue)" {...rest}>
      {children}
    </Box>
  );
}

import { Box, BoxProps } from '@chakra-ui/react';
import { ReactNode } from 'react';

// Pick で 横幅と縦幅のみ継承
interface Props extends Pick<BoxProps, 'width' | 'height' | 'w' | 'h'> {
  children?: ReactNode;
}

export default function GradientBox({ children, ...rest }: Props): JSX.Element {
  return (
    <Box bgGradient="linear(to-r, red,blue)" {...rest}>
      {children}
    </Box>
  );
}

• Chakra UI の再利用コンポーネント拡張の方法あれこれ
• コンポーネントを拡張したものを共通化して使う｜ Chakra UI の歩き方 & Tips 集

【補足】汎用性の高い便利なコンポーネント集

• Box
  • 基本中の基本（div）
• Container
  • メインコンテンツやサイドバーのラッパーに最適
• Center
  • 縦と横の中央寄せ
  • 縦の中央寄せしたい時に便利
• VStack / HStack / Stack
  • 縦 / 横 / 縦 or 横の均等配置が簡単に実装可能
  • レスポンシブ対応で、縦横の並びが変わる時は、Stack を使うこと
  • Spacer コンポーネントも使うことで、space-between と同様の効果が得られる
• SimpleGrid
  • シンプルなグリッド表示

最後に

参考文献

• Getting Started - Chakra UI
• Chakra UI の再利用コンポーネント拡張の方法あれこれ
• コンポーネントを拡張したものを共通化して使う｜ Chakra UI の歩き方 & Tips 集