StyleX group hover

Question

I was testing the new StyleX library and I was faced with a challenge within it. Is it possible to realize a group hover effect for a component only by using the library?

To make an example. Let's suppose we have this component in Tailwind (the same could be achieved using CSS):

<div className='group'>
  <button className='blue-50 group-hover:blue-40'>Call</button>
  <hr className='gray-50 group-hover:gray-40'/>
  <button className='blue-50 group-hover:blue-40'><i className='dropdown'/></button>
</div>

The functioning of this component is straightforward: when we hover over any subcomponent, we apply a lighter color shade to all the siblings. I tried to do the same within StyleX but I couldn't replicate it WITHOUT using a state and relying on JS callbacks.

By reading the StyleX guide I know that Encapsulation is not available. However, I was wondering if they have a different approach to reach the same result within the library and without relying on onMouseEnter, onMouseOut, and other callbacks.

Answer 1

This feature is planned but not yet implemented.