Chakra UIの再利用コンポーネント拡張の方法あれこれ

Chakra UIでカスタムコンポーネントを作ろうとした時、いくつかやり方があることがわかってきた。 1. 別コンポーネントとして普通にラッパーを作る 一番驚きの少ない方法 const RoundedOutlineButton: FC<ButtonProps> = (props) => { return <Button variant="outline" borderStyle="solid" borderWidth="2px" rounded="full" px={10} py={5} letterSpacing="0.1em" {...props} /> }