【Chakra V3】Drawerを表示している間のアイコンボタンスタイルを変更する

はじめに

Chakra v3でDrawer（サイドバー）を呼び出すアイコンボタンを実装した際に、クリックした後のスタイルを変更する方法を調べるのに時間がかかったため備忘として残します。

問題

サイドバーを表示している間、アイコンボタンの背景色がグレーになってしまうため、サイドバー表示中のスタイルを指定する方法を探しました。

該当のソースコードは以下です。

修正前

  return (
    <Drawer.Root
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
      placement={"start"}
    >
      <Drawer.Trigger asChild>
        <IconButton
          aria-label="sidebar open icon"
          variant="ghost"
        >
          <RxHamburgerMenu color="white" />
        </IconButton>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content w="150px" maxW="150px">
            <Drawer.Body>
              <Stack>
                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/home")}>
                    TOP
                  </Button>
                </DrawerActionTrigger>

                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/users")}>
                    ユーザ一一覧
                  </Button>
                </DrawerActionTrigger>
                <DrawerActionTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => handleClick("/setting")}
                  >
                    設定
                  </Button>
                </DrawerActionTrigger>
              </Stack>
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );

解決方法

Drawer.Trigger配下のIconButtonに_expanded={{ bg: "none" }}を設定すればOKです。

修正後

  return (
    <Drawer.Root
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
      placement={"start"}
    >
      <Drawer.Trigger asChild>
        <IconButton
          aria-label="sidebar open icon"
          variant="ghost"
+          _expanded={{ bg: "none" }}
        >
          <RxHamburgerMenu color="white" />
        </IconButton>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content w="150px" maxW="150px">
            <Drawer.Body>
              <Stack>
                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/home")}>
                    TOP
                  </Button>
                </DrawerActionTrigger>

                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/users")}>
                    ユーザ一一覧
                  </Button>
                </DrawerActionTrigger>
                <DrawerActionTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => handleClick("/setting")}
                  >
                    設定
                  </Button>
                </DrawerActionTrigger>
              </Stack>
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );

サイドバーを表示している間にボタン背景色がグレーにならないようになりました。

_expandedは何か？

HTMLに出力された<IconButton />コンポーネントを確認すると、aria-expanded="true"という属性が設定されています。

<button aria-expanded="true" ... >...<button>

Chakraでは様々なスタイルを設定する方法を提供していますが、その中の一つにARIA Attributeという指定方法があります。
これはaria-xxx=trueという属性を持つ要素に対して、_xxx:{{color:"red"}}のようにスタイルを設定できる機能です。

サイドバーを表示するとaria-expanded="true"という属性が自動で付与されるので、その際に適用されるスタイルとして_expanded={{ bg: "none" }}を指定しました。

おわりに

今までずっとtailwindcssばかり使っていましたが、chakraも一度覚えれば生産性がかなり高まりそうです。

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp