【Chakra UI】カスタムテーマで共通スタイルを使い回す

2023年6月30日

Chakra UIのカスタムテーマ、使っていますか？

カスタムテーマは便利で汎用的なスタイルを定義することができますが、その反面で意外と奥が深くやろうとしていることに時間がかかってしまうこともあります。

今回はカスタムテーマをもっと使いこなすために基本〜深掘りしたところをまとめました。

この記事でできること

Chakra UIのカスタムテーマを使用する方法
コンポーネントのカスタマイズ
コンポーネント共通のスタイル定義
グローバルなスタイル定義
カスタムテーマ経由でのcssクラス名を対象にしたスタイル定義

前提

本記事ではChakra UI V2.7.0を対象としています。

これ以前のバージョンでは実装方法が異なることもあるので注意してください。

また実装ではTypeScriptを使用していますが必要に応じてJavaScriptに読み替えてください。

カスタムテーマとは？

Chakra UIではコンポーネントにスタイルをなにも指定しない場合でもデフォルトで適用されるスタイル（＝デフォルトテーマ）があります。

カスタムテーマはこのデフォルトで適用されるスタイルそのものを変更したり、CSSのようにスタイルを上書きするためのものです。

説明だけではわかりにくいので実装を見ていきましょう。

カスタムテーマを使用しない場合

まずカスタムテーマを使用しない場合の実装例です。

１つめのボタンは個別にスタイルを指定していませんが、Chakra UIのデフォルトテーマが適用されているため単なる<button/>とは異なりスタイルが適用された状態で表示されています。

２つめのボタンはProps(プロパティ)にて個別にスタイルを変更しています。

カスタムテーマを使用した場合

次にカスタムテーマを使用した場合の実装例です。

１つめのボタンはカスタムテーマを使用しない場合と同様に個別にスタイル指定していません。
しかし、先程の例とは異なるスタイルが適用されています。
これはデフォルトのスタイルをカスタムテーマにて変更したためです。

２つめのボタンはPropsで個別にスタイル指定することをやめ、カスタムテーマに定義したvariantを使用して複数のスタイルをまとめて適用しています。

variantは「少し変わったもの」「変形」「変種」といった意味を持つようです。

カスタムテーマでできること

上記を踏まえ改めてカスタムテーマでできることとしては、

デフォルトテーマそのものを変更する
CSSのように汎用的に使えるスタイルセットを定義して使い回せる
色・フォントサイズ・幅・高さ・ボーダーなどの基本的なスタイルを変更する

といった感じです。

参考リンク

あわせて読みたい

Chakra UI Simple, Modular & Accessible UI Components for your React Applications

カスタムテーマの始め方

とにもかくにもまずは実装してみましょう。

以下のステップで実際にカスタムテーマを適用してみてイメージを掴みたいと思います。

この時点では実装の詳細については触れませんので特に気にせずでOKです。

STEP

カスタムテーマ管理フォルダの作成

カスタムテーマ用のフォルダthemeを作成します。

src/
`-- theme/

STEP

コンポーネント用のカスタムテーマ管理フォルダの作成

管理しやすくするためコンポーネント用フォルダtheme/componentsを作成します。

src/
`-- theme/
    `-- components/

カスタムテーマは肥大化します。コード分割する準備をしておきましょう。

STEP

ボタン用のカスタムテーマファイルの作成

theme/components/button.tsを作成します。

export const Button = {
  variants: {
    base: {
      bg: "green.300",
      color: "white"
    }
  }
}

STEP

カスタムテーマ定義ファイルの作成

theme/index.tsを作成します。

import { extendTheme } from "@chakra-ui/react"
import { Button } from "./components/button"

const customTheme = extendTheme({
  components: {
    Button
  }
})

export default customTheme

STEP

ChakraProviderの設定

Chakra UIを使用するためのChakraProviderに上記カスタムテーマを渡します。

...中略

root.render(
  <React.StrictMode>
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

STEP

スタイルの適用

今回はvariantを定義しましたのでコンポーネントに設定する必要があります。

以下のようにButtonコンポーネントのPropsに渡してあげましょう。

<Button variant="base">test</Button>

上記を実際に実装したものは以下です。

カスタマイズの基本

ここからはカスタムテーマを使いこなすために必要なことをまとめていきます。

カスタムテーマの構造

カスタムテーマは以下のようにextendThemeで定義した値を使用します。

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

const customTheme = extendTheme({
  components: {
    Button: {
      variants: {
        base: {
          bg: "green.300",
          color: "white"
        }
      }
    }
  }
})

export default customTheme

上記の値をChakraProviderに渡すことでカスタムテーマが使用可能となります。

import { ChakraProvider } from "@chakra-ui/react"
import * as React from "react"
import { createRoot } from "react-dom/client"
import { App } from "./App"
import customTheme from "./theme"

const rootElement = document.getElementById("root")
const root = createRoot(rootElement)

root.render(
  <React.StrictMode>
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

このようにextendThemeの中にずらずらと定義を書いても動作上は問題ありません。
しかしカスタムテーマの始め方で示したようにファイル分割しておく方が管理しやすいです。

カスタマイズ可能な項目

カスタマイズ可能な項目（＝extendTheme内に定義できるもの）で主に使用するであろうものは以下です。

const theme = extendTheme({
  components: {},
  colors: {},
  fonts: {},
  sizes: {},
  textStyles: {},
  layerStyles: {},
  shadows: {},
  zIndices: {},
  styles: {},
  config: {},
})

他にもカスタマイズ可能なものはありますが基本的に上記で十分かと思います。

実際のカスタマイズ方法は以降で説明します。

参考リンク

あわせて読みたい

Chakra UI Simple, Modular & Accessible UI Components for your React Applications

あわせて読みたい

Chakra UI Simple, Modular & Accessible UI Components for your React Applications

コンポーネントの種類

Chakra UIが提供するコンポーネントは大きく以下の２つに分かれています。

シングルパートコンポーネント（Single Part Components）

単一の要素のみで構成されているコンポーネント。

例えばButtonはシングルパートコンポーネントです。

マルチパートコンポーネント（Multipart Components）

複数の要素で構成されているコンポーネント。

例えばInputはマルチパートコンポーネントです。

コンポーネントの種類によってカスタムテーマの実装方法が異なります。

動作確認できないなどハマりがちなポイントなので注意です。

どのコンポーネントがどちらに該当するかは公式サイトのドキュメントもしくは公開されているソースコードから読み解く必要があります。

参考リンク

あわせて読みたい

Chakra UI Simple, Modular & Accessible UI Components for your React Applications

カスタマイズする（コンポーネント）

ここからはChakra UIが提供するコンポーネントをカスタマイズしてみます。

実装をみるのが一番わかりやすいためサンプル実装をベースに使い方をまとめます。

シングルパートコンポーネント（Single Part Components）

まずはシングルパートコンポーネントです。

ここではButtonコンポーネントを対象に実装します。

カスタマイズにはヘルパー関数defineStyleConfigが補完がきいてオススメです。

設定できるプロパティは以下のようになります。

baseStyle

対象コンポーネント全体に適用する基本スタイルを設定します。

上記の例ではborderRadiusを設定することでデフォルトの見た目を丸くしています。

コンポーネントによって設定できるもの・できないものがあるので注意が必要です。

例えばButtonの場合はbaseStyleにbgを設定して背景色を変更しようとしても反映されません。

variants

対象コンポーネントで使用可能なスタイルのセットを定義します。

上記の例では黄色いボタンがわかりやすい使用例です。

使い方をまとめると、

カスタムテーマ定義のvariantsに任意の名前のオブジェクト（例:attention）を用意して適用したいスタイルをまとめて定義する。
個別のコンポーネント実装箇所のvariantプロパティに①で定義したオブジェクトの名前（例:attention）を指定する。

さまざまな種類のスタイルをvariantの指定のみで汎用的に使い回せます。

sizes

対象コンポーネントのサイズを新たに定義できます。

上記の例では丸い大きめのボタンで使われています。

使い方はvariantsと同様に

カスタムテーマ定義のsizesに任意の名前のオブジェクト（例:big）を用意して適用したいスタイルをまとめて定義する。
個別のコンポーネント実装箇所のsizeプロパティに①で定義したオブジェクトの名前（例:big）を指定する。

defaultProps

対象コンポーネントに適用するデフォルトのPropsを定義します。

上記例ではvariantに'base'を指定しており、なにもPropsを与えないでButtonを表示した場合の見た目を'base'で定義したスタイルとしています。

参考リンク

あわせて読みたい

Chakra UI Simple, Modular & Accessible UI Components for your React Applications

マルチパートコンポーネント（Multipart Components）

次にマルチパートコンポーネントです。

例としてCheckboxを対象に実装します。

シングルパートコンポーネントと同じような感じですが、その対比としては

基本的な設定項目（baseStyle,variantsなど）は同じ
コンポーネントを構成する複数の要素（上記実装ではcontrol,label,iconなど）に対してスタイル定義する必要がある
使用するヘルパー関数はcreateMultiStyleConfigHelpers,defineMultiStyleConfig,definePartsStyleの３つ