I don't prefer the syntax of one over the other, but I found it very practical because:
Adding vendor prefixes automatically, now you can achieve the same with CSS in a CRA project btw.
If you are more skilled with JS than CSS it is easy to think and work with JS rules (I think this is the main reason why many developers are attracted to CSS in JS).
In CSS you have css variables that may not work in all browsers, but the equivalent of styled components are simply props, which blend very easily with the rest of your React architecture.
To show a real-world example, some time ago I needed to make a React component library that needs to run in older browsers, so CSS variables were not an option and handling prefixes and different themes was much easier with styled-components in that particular scenario.
At the end of the day I think there is not such a bad option here, but you have to think about what problem you want to solve using any other framework/library instead of regular CSS which will be here forever.
For the autocomplete thing in styled-components you can install a VSCode plugin that does the same, with syntax highlight :)
I don't prefer the syntax of one over the other, but I found it very practical because:
To show a real-world example, some time ago I needed to make a React component library that needs to run in older browsers, so CSS variables were not an option and handling prefixes and different themes was much easier with styled-components in that particular scenario.
At the end of the day I think there is not such a bad option here, but you have to think about what problem you want to solve using any other framework/library instead of regular CSS which will be here forever.
For the autocomplete thing in styled-components you can install a VSCode plugin that does the same, with syntax highlight :)
I see, thank you for the comprehensive response! 😄 it helped me to understand the context better!