CSS-in-JS is a sometimes controversial topic. Before React, it was almost mandatory that you'd have a trio of sets of JS, HTML, and CSS separate files. When React introduced JSX, that was a shot against the trio, because we started placing HTML in the JS code. CSS-in-JS is the natural extension of that idea, because now we want to also include styling within the same JS files.
A first reaction to this is: Isn't that just going back to inline styles? This is a valid question, but inline styles aren't just powerful enough. While you can manage lots of styling by inlining styles, the fact is that there are several features that aren't accessible in this way: keyframes animation, media queries, pseudo selectors, and more.
The idea of going with CSS-in-JS is writing styles by using JS, but then injecting those styles...
