Even just showing how a :hover works in some of these libraries would be good.
Tommy Hodgins
32

CSS-in-JS is literally CSS-in-JS, so you can use any pseudoclasses you want. For example, adding aΒ :hover effect on a button element in plain CSS would look like this:

// css
.button:hover {
background-color: red;
}
// html
<button class='button'>Hello</button>

styled-components looks like this:

const Button = styled.button`
  &:hover {
background-color: red;
}
`;
<Button>Hello</Button>

And in glamor the same thing would look like this:

const rule = css({
':hover': {
background-color: 'red'
}
})
<button className={rule]>Hello</Hello>

This of course applies also to animations, iterators and other kinds of CSS things you could imagine.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.