Chapter 20無料公開

どんなコンポーネントもChakra UIっぽく扱いたいならchakra factory機能を使う

terrierscript
terrierscript
2021.05.13に更新

様々なDOMをChakraっぽいコンポーネントにする

chakra()関数を使うことで様々なDOM要素やコンポーネントをChakra UIで提供されているコンポーネントのようにstyled systemが使えるように加工出来ます。

https://chakra-ui.com/docs/features/chakra-factory

例えばCanvasなどであれば、下記のようになります

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

const Canvas = chakra("canvas")

<Canvas w={100} h={100} bg="red.100" />

<marquee>などマイナーなコンポーネントは型定義がされていませんが、単純にDOM化されるだけなのでこちらも可能です。

// @ts-ignore
const Marquee = chakra("marquee")

<Marquee color="blue.500" bg="red.100" p={4}>aaa</Marquee>

styleをつける

第二引数はオプションとなっているので、デフォルトのスタイルを設定することも可能です

const CanvasWithStyle = chakra("canvas", {
  baseStyle: {
    w: 100,
    h: 100,
    bg: "red.100"
  }
})

<CanvasWithStyle />
// 下記と同じ
// <Canvas w={100} h={100} bg="red.100" />

Chakraコンポーネントに更にstyleを付ける

Chakraのコンポーネントを更にstyleを付けることも可能です。

const RoundedButton = chakra(Button, {
  baseStyle: {
    rounded: "full",
  }
})

サードパーティなコンポーネントもchakra風にする

DOM以外のサードパーティなコンポーネントもstyleをつけれるものであれば対応出来る場合があります
こちらは公式サイトにも記載があります。

import SomeThirdPartyComponent from "some-third-party"

const StyledSomeThirdPartyComponent = chakra(SomeThirdPartyComponent)