chakra-uiでボーダーラインを点線にする方法

はじめに

Webサイト作成にあたって、UIフレームワークにchakra-uiを採用しており、chakra-uiでのボーダーラインを点線に（破線）にする方法で少し戸惑ったため記録しておく。

公式サイトを見る

chakra-uiでのボーダーラインは公式サイトで、'Divider' として用意されている。
https://chakra-ui.com/docs/components/divider/usage

結論

今回の記事の結論時から話すと、このDividerコンポーネントの属性を変更することで、点線（破線）を用意することができる。
Propsを確認すると、"variant" という属性が用意されており、defaultでは"solid"になっているが、"dashed"に変更することで、点線（破線）に変更できる。

英語の意味的に、"solid"は固まりを意味し、dashedは"破線"を意味する

薄いですが下に表示結果を示します。

<Divider />

<Divider variant={"dashed"} />

tips

Dividerコンポーネントの属性をいじることで、ボーダーラインをカスタマイズできます。
点線に変更する場合は、variant属性を"dashed"に変更すればよかったですが、線の色や大きさを変更する場合は以下のように設定します。
borderColor属性で色の変更を行い、borderWidthで線の太さを変更できます。

<Divider 
    variant={"dashed"} 
    borderColor={"black"} 
    borderWidth={10} 
/>

以上が、chakra-uiで点線を表示する方法についてでした。
また、忘れそうになったら見返そうと思います。
最後まで見ていただきありがとうございました。