对于CSS Pseudo类，为什么React开发人员必须进行状态更改？

Question

In React, Can somebody explain me, for CSS Pseudo classes (eg. hover,focus,active etc), why I have to go for state changes in react ? why not react developers kept that style like we do in CSS?

Answer 1

The example which you are referring on https://jsfiddle.net/rz2t224t/2 shows handling specific events on the HTML element.

return React.createElement(
 "button",
 {onMouseOver: this.mouseOver, onMouseOut: this.mouseOut},
 label
);

With above code when onMouseOver and onMouseOut event occur on the button then mouseOver and mouseOut function will be executed respectively.

We can use CSS with reactjs normally as we do.

For example of hover : https://jsfiddle.net/balaji_mitkari/69z2wepo/68520/

Answer 2

You have to use .css to achieve what you are after, you can't do it with inline styles:

from https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.gwcfeppld

CSS pseudo classes and media queries are not supported: Using inline styles doesn't give you the full expressiveness compared to writing normal CSS: In particular, there is no way to express CSS selectors for pseudo classes like .notification:hover or .notification:before. Also, it is not possible to use media queries to adapt the styling based on view medium (eg adjust the content to look different when viewed on mobile vs. on desktop). Libraries like Radium offer a way to work around these limitations but have to do a nasty tricks to get there.