How to handle nested group hover styles?

[hazem3500]

I have an Icon that is inside a Button which is nested inside a ButtonGroup
The Icon color should change when I hover over the Button but not when I hover over the ButtonGroup

Example

<ButtonGroup>
    <Button rightIcon={<Icon _groupHover={{ color: "red.500" }} />}>
        Click
    </Button>
    <IconButton icon={<Icon _groupHover={{ color: "green.500" }} />} />
</ButtonGroup>

The problem is that ButtonGroup and Button both have a role="group" which makes the Icon change color when I hover over the whole ButtonGroup

CodeSandBox Link: https://codesandbox.io/s/tender-poitras-oc206?file=/src/index.js

[aaronkik]

Hi Hazem,

This is my solution: https://codesandbox.io/s/blazing-grass-y5m4j?file=/src/index.js

I had to wrap the text in the button with the Text component to prevent it from inheritting the red color.

[hazem3500]

Oh, that's a cool solution, but what can we do if it's a non-inheritable property like transform?

[aaronkik]

Hmm I'm not too sure, you may need to handle some state that would let you know if you're hovering over the Button container then set some css variables to the Icon based on the state.

This is a possible solution the only issue is you would need to apply some animation to it if you want it smooth.
https://codesandbox.io/s/sad-wright-n2g0b?file=/src/index.js

Here's the hook I used for it: https://chakra-ui.com/docs/hooks/use-boolean

[hazem3500]

Hmmmm, I guess that will work, would've been better if we didn't need to use state/js for it though 😅

Thanks @AaronK97 for your help XD

[anubra266]

There's a way to do this without state.
First give a classname to both your button and Icon. Then call the sibling identifier styles in the ButtonGroup

<ButtonGroup sx={{ '.but:hover ~ .ico' : { color: 'green.500' } }}>
    <Button className="but" rightIcon={<Icon />}>
        Click
    </Button>
    <IconButton icon={<Icon  className="ico" />} />
</ButtonGroup>

[hazem3500]

What I ended up doing was add to my Button component an attribute data-component-name="Button"

then used it as a selector

{
  '[data-component-name="Button"]:hover &': {
    color: "green.500"
  }
}

Quite pragmatic, I think every component in Chakra-UI should have a data-component-name attribute as an escape-hatch

[veloware]

Ive been trying all sorts of weird and wonderful things, knowing that this was achievable, but I've been just trying to source a way where the child component doesn't reference the parent component in any way, as in you have the child component referencing 'Button' within it. Aw well, if that's whats needed... Thanks!

[Sid-Turner-Ellis]

@hazem3500 fyi you can also do this:

<Box role='group'>
    <Box _groupHover={{bgColor: 'blue.500'}}>
        <Component />
    </Box>

    <OtherComponents />
</Box>

Docs: https://chakra-ui.com/docs/styled-system/style-props#pseudo