I thought this as well, along with worries of separation of concerns. After messing with styled-components though, I gotta say. One, performance isn't that bad. Two, it really makes CSS a little more powerful.

You can easily mathematically apply sizes, conditionally set different rules, and such. In regular CSS, you'd have to come up with a style rule per condition and conditionally set class name with DOM manipulation.

CSS-In-JS also solves the problem of specificity that the doing the above could cause. It's also fairly similar to Angular Directives.

There's also no real learning curve, for vanilla styling. If you know CSS, then you can use CSS-In-JS just fine. It took me under a day to figure out the basics.

The cons of CSS-in-JS is that i can cause some bloat but that's solvable by separating in separate files.