Chakra UIで親要素をhoverしたときに子要素のbackgroundも変更する

はじめに

Chakra UIで、親要素のhoverで子要素のボタンも同時にstyleを変更するというUIをどのように実現すればよいかを調べてみました。

groupHoverを使う

親要素のhoverを子要素に伝えるにはgroupHoverが使えます。
親要素のBoxに対してrole="group"を指定して、子要素のIconButtonには_groupHover={}を指定します。

export function App() {
  return (
    <Box
      w="200px"
      role="group"
      bg="blue.100"
      transitionProperty="common"
      transitionDuration="normal"
      _hover={{ bg: "blue.200" }}
    >
      <IconButton
        icon={<HamburgerIcon />}
        aria-label="sub-menu"
        bg="blue.100"
        _groupHover={{ bg: "blue.200" }}
      />
    </Box>
  );
}

これで、Boxにhoverしたときに、IconButtomも同時にbackgroundの色を変えることができるようになりました。

子要素自体にhoverしたときに別のstyleを適用したい

この方法だと、子要素にhoverしても元々のstyleが適用されません。
子要素はIconButtonなので、そこにhoverするとIconButtonのstyleが適用されてほしいです。

元々のButtonの設定よりgroupHoverの設定が優先されてしまうようなので、以下のように、子要素に_hoverを設定して、!importantにし、子要素の_hoverを優先するように設定することで子要素に対して別のstyleを適用することができました。
ただ、もう少しスマートに解決する方法があるかもです。

export function App() {
  return (
    <Box
      w="200px"
      role="group"
      bg="blue.100"
      transitionProperty="common"
      transitionDuration="normal"
      _hover={{ bg: "blue.200" }}
    >
      <IconButton
        icon={<HamburgerIcon />}
        aria-label="sub-menu"
        bg="blue.100"
        _groupHover={{ bg: "blue.200" }}
        _hover={{ bg: "gray.200 !important" }}
      />
    </Box>
  );
}

参考資料