Styling and semantics represent different problems and require different solutions.
Regardless of how it relates to styled components (which I could not care less about), this statement is simply not true.
Take an extreme example: if you set <body> to display: none, what does our page convey? Well, nothing really. At least not to visitors using user agents that do something with display: none. If you style a text input to have the same border, background, and text color, as the page background, how will users know what it is and how it works? Apparently, styling is not quite orthogonal to semantics. This is one reason we have the default stylesheet in all user agents: it would otherwise be impossible to peruse web pages.
The misconception that styling and semantics are orthogonal comes from the artificial separation of concerns that places HTML and CSS into two different buckets without much thought. Having HTML and CSS in separate buckets only splits the problem along syntactical boundaries, without any consideration of the intimate relationship between content and its appearance. Unless you are expecting users to read the source code, and understand the choice of semantic tags you carefully made for the content, including a dozen or so custom tags you had to invent in order to convey subtle deviations from concepts that can be conveyed using only the standard HTML tags…
A paper by Rob Waller provides an extremely in-depth discussion on this topic from the perspective of typography, which is one of the most fundamental visual aspects of written works.
Having said all this, styled components don’t really do anything in this regard, so the rest of the point still stands. Nobody can force you to think [correctly] about semantics, with or without CSS in JavaScript.
