Chakra UIでホバー時のボタンの背景色を変える

公開日時
更新日時

Chakra UIを使ってボタンを表示する際に、ホバー時にボタンの背景色を変えたかったのでやり方を調べた。

_hover 属性でホバー時の設定ができる。

<Button bg="#ff0000" _hover={{ bg: '#00ff00' }}>
  Button
</Button>

上記のボタンだと赤色のボタンが表示され、ホバーすると緑色に変化する。

参考

- How to set a hover color on Icons? · Issue #363 · chakra-ui/chakra-ui


Related #css

Tailwind CSSでダークモード対応をする

classを指定してユーザがダークモードを切り替えられるようにした

Next.js9 + Tailwindcss2.0環境で Error: true is not a PostCSS plugin エラーが発生

Next.jsを最新バージョンにアップデートした

Refactoring UI: The Book

個人開発で何か作る際にBootstrap感のあるUIになりがち問題を解消したい

tailwindcss2.0 upgrade

Upgrade Guideを参考に

@tailwindcss/typographyにもダークモードを適用する

tailwind.config.jsにtypography設定を追加