И кстати, число плюсанувших мой первый комментарий выше, нарастает. Счас уже 6. Т.е. люди понимают, о чём я веду разговор.
В таких компонентах это действительно выглядит неплохо, но если там будет не 3 строчки стилей, а под сотню, а сам компонент состоит чуть больше чем из 3 строк кода, выглядеть это все будет совсем иначе.
Но не стоит возводить любую технологию в абсолют и пихать ее во все проекты без разбора, нужна она там или нет.
Проблема кеширования, такие стили не могут быть закешированы, т.к генерируются на лету и требуют того чтобы браузер распарсил ваш компонент и добавил стили в DOM. + Как результат намного больший размер финального бандла проекта
Хаос в файлах, когда приходится держать вместе компоненты и их стили.
// где тут хаос?
export const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// где-то в другом файле
import { Title, Container } from "...";
export const App = () => (
<Container>
<Title>Mega Title</Title>
</Container>
);