Closed AlfonzAlfonz closed 2 years ago
Hello @AlfonzAlfonz, it is not built-in but you can easily achieve it by customising states:
const theme = {
...defaultTheme,
states: {
...defaultTheme.states,
groupHover: '.group:hover &'
},
}
<div className="group">
<x.div display={{ _: "none", groupHover: "flex" }} />
</div>
🚀 Feature Proposal
Currently xstyled misses a way to style an element that depends on the state of some of its parents. This proposal attempts to solve this issue by adding a "group" utility prop and "group" states. Group utility marks an element that its children may depend on its state. Individual elements then can use group states to add styles.
Motivation
Provide a simple way to style elements controlled by the state of a parent element.
Example
The most common use case I can think of is a text inside of a button.
Gray overlay over an image.
Pitch
Right now xstyled is missing this feature and currently, there's no workaround, which supports all usecases. Other similar libraries also have this feature. For example Tailwind or Chakra.