Hi, guys, just checking up on whether there is any guidance anywhere on how to style and customise Radix instances. There is not a lot of documentation in the Webstudio docs atm, and the docs in the Radix website assume I'm a JS developer working with React. Any guidance would be truly appreciated. 🙏
Thanks, @Connor Betts, but as explained in the original post this doesn't work when you can't select states.
Is this not what you are talking about? I grabbed this screenshot from the doc I linked. It shows the states when clicking a token, in this case the local one.
In that screenshot you have the BODY selected, rather than a Radix instance. Try putting a Select instance from the Radix components (not the normal Select) on your page, and then try styling it. You will see that there are no states to select.
wrap the contents of the select item into a box and you can set hover etc
@Bogdan will also add all the states on the item directly so that you don't have to wrap it with a div
@Oleg Isonen I just tried your workaround, and it doesn't quite work: I can now indeed set, for example, a background-color for :hover on the parent box, but my choice is not applied - it still shows the default Radix hover colour...
tested, you are doing somethig wrong
Try changing the background colour on hover...
that's what you see on the screenshot
I see you changed the typography (foreground) colour. The text looks red. Now, try applying a different colour to the background of the box, so that the text shows against, let's say, a light yellow background. And then try changing it so that the light yellow background changes to a light blue on hover...
Switch to Preview mode, and you will see 2 issues:
1) When you first click on the Select, the yellow background colour is NOT applied to the item. It only shows once you hover it and exit it the first time.
2) The hover colour is not applied: you'll continue to see the default light gray from the Radix standard.
@Oleg Isonen I've just also tried changing the typography (foreground) colour on hover, and it's not working for me. In the Editor I can see that the colours have been applied appropriately to to the parent box, but they're not affecting how the Radix instance is displaying colour on hover.
I'd be grateful if you could check the project link above, and let me know if there is something obvious I'm missing.
