Best practices to handle :hover styles of children elements

[gamegee]

I want to make my own custom button to fit specific use-cases.

I want my button to apply specific style to children component given a type props.
But I can't figure out how I can handle :hover styling with chakra-ui. It looks like I need to use @emotion-styled helpers to do that...

In css the result would be:

.Button:hover > .Icon,
.Button:hover > .Text {
  color: red
} 

Here's my use-case

export type ButtonProps = BoxProps & {
  label: string
  iconName: string
  type: 'primary' | 'secondary'
}

export const Button: FC<ButtonProps> = ({ label, iconName, type }) => {
  const color = 'primary' ? 'blue' : 'gray'

  return (
    <PseudoBox
      _hover={{
        '&>div': { color: red }
      }}
    >
      <Icon name={iconName} color={color} />
      <Text color={color}>{label}</Text>
    </PseudoBox>
  )
}

Maybe the new major (v1.0.0) of Chakra-ui will fix this issue

[with-heart]

@gamegee You could make this a lot easier on yourself by moving color to PseudoBox and using _hover: https://codesandbox.io/s/suspicious-fermat-jqivf?file=/src/App.tsx

[gamegee]

For my use-case it can do the work, but what if I want the Icon and Text to have different colors (e.g. red for icon and yellow for text) on PseudoBox hover ?

[gamegee]

I found a way to do this using _groupHover:

export type ButtonProps = BoxProps & {
  label: string
  iconName: string
  type: 'primary' | 'secondary'
}

export const Button: FC<ButtonProps> = ({ label, iconName, type }) => {
  const color = 'primary' ? 'blue' : 'gray'

  return (
    <PseudoBox
      role="group"
    >
      <Icon name={iconName} color={color} _groupHover={{color: 'red' }} />
      <Text color={color} _groupHover={{color: 'yellow' }}>{label}</Text>
    </PseudoBox>
  )
}

[ahmadrio]

thanks

[BrunoQuaresma]

But if it needs to be a button, is it not "wrong" to change the role to be a "group"?

[ehynds]

But if it needs to be a button, is it not "wrong" to change the role to be a "group"?

Giving the ancestor the data-group attribute also works if you don't want to set role.

<Box data-group>
  <Text _groupHover={{ color: 'yellow' }}>{label}</Text>
</Box>

[veloware]

Im also facing this issue, the above suggestions do work, however in my case I building a custom radio button, well, more a super select. I want the radio button to take its hover state when hovering anywhere in the super select item. I can't apply data-group the list of super select components will be rendered within their own 'group' i.e. a RadioGroup

Any suggestions?

I don't want to send the styles down into the Radio, I want the ability to tell the Radio - 'Behave like you are being hovered over'