CodeZine(コードジン)

特集ページ一覧

ReactのUIコンポーネントライブラリ「Chakra UI」とは? カスタマイズ性と生産性を両立しよう【前編】

現場で役立つ! React向けライブラリ詳説 第6回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/10/08 11:00
目次

テーマをカスタマイズする

 さて、ここまではライブラリからインポートしたデフォルトのテーマを使っていましたが、Chakra UIはカスタマイズのしやすさも魅力のひとつです。カスタムテーマを作成してみましょう。

カラーパレットを拡張する

 手始めに、カラーパレットを拡張してみましょう。テーマオブジェクトを自作するには、extendTheme関数を利用します(リスト6)。

[リスト6]テーマをカスタマイズする
// (略)
import {
  // (略)
  extendTheme, // (1)
} from '@chakra-ui/react';
// (略)

const theme = extendTheme({
  colors: {
    brand: {
      main: "#008CCF" // (3)
    },
    // デフォルトのテーマは次のような形
    // teal: {
    //   50: "#E6FFFA",
    //   100: "#B2F5EA",
    //   ...
    // },
    // ...
  }
});

function App() {
  return (
    <ChakraProvider theme={theme}>{/-(2) */}
// (略)

 (1)でインポートしたextendThemeで作成したテーマオブジェクトを、デフォルトのテーマと同じように(2)でProviderのtheme属性に渡しています。

 色定義は、colors以下の任意の階層にカラーコードを記述して定義します。今回は(3)にbrand.mainという名前のブランドカラーを定義してみました。実際に、<Link>要素でスタイルとして使ってみましょう(リスト6)。

[リスト6]自作した色名を指定する
<Link
  color="brand.main" // (1)
  href="https://chakra-ui.com"
  fontSize="2xl"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn Chakra
</Link>

 (1)に、先ほど作ったbrand.mainを指定しました。さて、実行してみましょう(図6)。

図6:自作の色が表示された
図6:自作の色が表示された

 brand.mainで指定した色が表示されました。このように、簡単にテーマを拡張できます。

まとめ

 今回はChakra UIの世界観をざっくり把握してもらうために、スタイルの指定の方法を中心に解説しました。次回は、個別のコンポーネントについて解説します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5