How to change the color of children based on parent state?

is it possible to change the color of children based on the parent state?
eg: on hover parent element it will change it background, and the children’s text color will change to a different color (based on parent hover)

Yes, you can do this using component variants. Convert the parent element into a component, and then you can style any of its content in that variant.

I wasn’t finding it because I was trying to do interactions in a code component, and I assume it doesn’t work, right?

what would be the right thing to do in this case:
I have a code component responsible for adding a product to the cart (screenshot below). I would like to let the button be stylished in the Studio by the designer, and this button should have a hover interaction, changing its colors.

Should I build a button component in Studio, and call it inside the button code component instead to call props.children? :exploding_head:


wow. big trip mine. I just created a stylished button in studio and put it inside the children. worked like a charm (I have tried it before I sent this message and didn’t work, probably I was doing some craziness)

sorry for wasting your time :disappointed: thanks :heart: