I’m building a restyle for a certain component library to implement a company design system. I’d like to be able to render components styled as if they were hovered / pressed / focused to be able to show and test the styles applied when the component is in one of these states.
AFAICS there’s no way to actually simulate those element states. Similar questions are most often concerned with simulating the corresponding events, which doesn’t concern me, as it isn’t able to actually simulate the :hover / :active / :focus styling. Others suggest using classNames in styles instead of pseudo-classes, which is not applicable when not in [full] control of the styles in question.
I’m using Emotion for styling, so I don’t create styles directly. They are generated automatically as a number of <style> nodes in document head.
You need to sign in to view this answers
Leave feedback about this