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

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

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

　さて、ここまではライブラリからインポートしたデフォルトのテーマを使っていましたが、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：自作の色が表示された

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

まとめ

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