Styled Components permite que você declare a estilização de um componente, já obtendo um componente como retorno.

Dessa maneira podemos deixar a estrutura da nossa aplicação mais semântica. Sem contar que há o uso do chamado “CSS-in-JS”, onde declaramos o CSS dentro do JavaScript. Isso nos permite ter todo o poder do JavaScript para gerenciar a estilização, sem precisar ficar criando lógicas para adicionar ou remover classes CSS nos nossos elementos.

Como algumas das vantagens, temos:

• não encher a estrutura da aplicação com várias classes CSS nos elementos;
• ter um código mais semântico;
• facilidade na criação de temas;
• poder usar JavaScript para gerenciar a estilização facilmente, de forma separada da estrutura e lógica da aplicação e dos componentes;
• melhora a experiência do desenvolvedor;
• apenas carrega o CSS dos componentes presentes na tela, evitando carregar coisas desnecessárias;
• gera nomes únicos, evitando que a estilização de um componente influencie em outro;
• se uma estilização não está sendo usada, ela automaticamente não será incluída no código final.