Chapter 08無料公開

Theme: その他の機能(variant, z-index, カスタマイズ)

terrierscript
terrierscript
2021.05.13に更新
このチャプターの目次

その他にもThemeには設定があるので、ここで触れておきましょう

variant

各コンポーネントはsolidoutlineなど、デフォルトで数種類のスタイルパターンが用意されています。
これはvariantという名前でthemeの機能の一部として提供されています。

Material UIなど他のUIライブラリでも同じような名前で扱われているので、馴染みのある場合はそれほど混乱しないかもしれません

Buttonならsolid,ghost,outline,linkInputならoutline,unstyled, flushed,filled など、コンポーネントによってそれぞれ設定されています。各コンポーネントのページを確認しましょう

z-index

CSSで厄介なz-indexについてもThemeの値が存在しています。

dropdown,banner,modalなど様々用意されています。

基本的にはコンポーネントが内部的に利用しているものなので、ほとんど意識することもありませんが、例えば固定ヘッダなどを作るときは利用できます

<Box top={0} position="sticky" zIndex={"sticky"}>ヘッダ</Box>

z-indexは自前で管理してしまうと厄介な問題を引き起こしがちなものです。基本的に数値を入れず、積極的に利用していくのが良いでしょう

また、公式ではz-indexについてのガイドも公開されているので、一読しても良いかもしれません

https://chakra-ui.com/guides/z-index

Themeのカスタマイズ

Themeはもちろんカスタマイズが可能です。

かなり複雑で上級者向けなので、ここでは軽い紹介程度に触れておきます。

// extendThemeで既存テーマを拡張。引数に複数の拡張を列挙
const customizedTheme = extendTheme({
  styles:{
    global: {
      a: {
        color: "blue.500"
      }
    }
  },
})

<ChakraProvider theme={customizedTheme}>