Chakra UI v3 ボタンの色を変えた時の挙動の確認

はじめに

はまったので記事にします。

問題

https://qiita.com/like-mountain/items/a8b70f0eacc58729c138
前回投稿の、カスタムフックで色を変える処理をしたところ、Buttonが正常に動かなくなっている
(hoverしても色が変わらない)

解決方法

background colorを変えて、ボタン機能を使えるようにはなっていませんが、
動きの違いはなんとなく分かりました。

gifのボタンは、上から順番に以下の通りになっています。
(1)(2)前回の方法で色を変えた(hoverが使えず、ボタン機能が失われている)
(3)(4)色を変えずにボタン機能を使う(ボタン機能が使える)
(5)chakra.buttonでhoverを記載する(bgで色を変えると、borderRadiusが効かない)
(6)chakra.buttonでhoverを使う(ボタン機能は使えて、hoverすると色を変えることはできたが、通常時の色やborderRadiusが効かない)

App.tsx

import { Table, VStack, Button } from "@chakra-ui/react";
import { RiArrowRightLine, RiMailLine } from "react-icons/ri"
import { chakra } from "@chakra-ui/react"

export default function App() {

~~~中略~~~

return (
    <>
        <VStack>
            <Button bg="red.300/40" >Button</Button>
            <Button  bgColor="red.200" >Button</Button>

            <Button colorPalette="teal" variant="solid" >
                <RiMailLine /> Email
            </Button>

            <Button colorPalette="red" variant="outline">
                    Call us <RiArrowRightLine />
            </Button>

             <chakra.button
                borderWidth="1px"
                colorPalette="blue"
                borderColor="colorPalette.500"
                bgColor="red.200"
                padding="4px 8px"
                fontSize="16px"
                borderRadius="xl"
                _hover={{
                    borderColor: "gray.400",
                    backgroundColor: "red.800",
                }}
            >
                    Click me
            </chakra.button>

            <chakra.button
            //上と同じコードで、1部分だけcommentoutして挙動を確かめる
                // borderWidth="1px"
                // colorPalette="blue"
                // borderColor="colorPalette.500"
                // bgColor="red.200"
                padding="4px 8px"
                fontSize="16px"
                borderRadius="xl"
                _hover={{
                    borderColor: "gray.400",
                    backgroundColor: "red.800",
                }}
            >
                Click me
            </chakra.button>
        </VStack>
    </>
)
}

おわりに

Chakra UI のv3はリリース直後のため、未知な部分、バグなどがあるのかもしれません。