Inline CSS styles in React: how to implement a:hover?

Question

I quite like the inline CSS pattern in React and decided to use it.

However, you can\'t use the :hover and similar selectors. So what\'s the best way to

Answer 1

onMouseOver and onMouseLeave with setState at first seemed like a bit of overhead to me - but as this is how react works, it seems the easiest and cleanest solution to me.

rendering a theming css serverside for example, is also a good solution and keeps the react components more clean.

if you dont have to append dynamic styles to elements ( for example for a theming ) you should not use inline styles at all but use css classes instead.

this is a traditional html/css rule to keep html / JSX clean and simple.