Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!
What’s the purpose/benefit of generating classes from CSS versus just using CSS?
Couldn’t I just inject a CSS string into a component and put that string into a style tag?
The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs.
Here’s what the article you linked to says:
“Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!”
All addressed by backticked strings in style tags.
Are you sure you are correct or are you just guessing?
This is especially helpful as your site and team scales - you don't need to worry as much about stepping on other people's toes, nor do you need to be as aware of the entire (styling) scope of your website. When you do share/cascade/compose/extend styles, it makes it a lot more explicit in the way you do it.
It's basically taking a concept like BEM and baking it into the language, reducing the mental overhead.