search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

Is it possible to have group-hover, group-focus styles like the ones found in tailwind ? #290

Closed joseDaKing closed 3 years ago

joseDaKing commented 3 years ago

Is it possible to have group-hover, group-focus styles like the ones found in tailwindcss?

gregberge commented 3 years ago

Yeah, you can add a custom state:

const theme = {
  ...defaultTheme,
  states: {
    ...defaultTheme.states,
    'group-hover': '.group:hover &',
    'group-focus': '.group:focus &',
}

Then add a className="group" on the group, and use group-hover state on children. Do you see what I mean?