Estilizando com Styled Components

Primeiramente, Styled Components é uma biblioteca para ReactJS e React Native que permite estilizar a nível de componentes. Basicamente, você estiliza seus componentes com CSS dentro do JavaScript ao invés de adicionar classes CSS ao nosso HTML, deixando o código mais limpo.

Como assim deixando o código mais limpo? No que isso vai me ajudar?

Dessa maneira, não precisamos ficar importando arquivos .css em nossas páginas evitando conflitos de estilos visto que o Styled Components cria uma hash nas classes CSS fazendo com que cada componente conheça apenas o seu CSS. E se um dia precisarmos reutilizar o mesmo componente, uma das maneiras mais básicas é criando o componente em específico dentro de uma pasta ui no projeto.

Com Styled Components também não temos a dor de cabeça com a compatibilidade de browsers, ele já faz todo o trabalho baseado nos estilos que colocamos no componente.

Para fins de demonstração, eu criei um repositório com os exemplos do Styled e do CSS para você acompanhar como ficaria na prática, porque aqui no post irei demonstrar trechos de códigos (alguns estão comentados porque tiveram duplicação da minha parte).

As principais diferenças entre CSS e Styled Components são:

A sintaxe:

Como eu disse anteriormente, Styled Components é uma lib de estilização a nível de componentes, ou seja, você a usa em forma de componentes mesmo.

Formas de estilização:

Para estilizar um Styled Components você usa template strings para estilizar e não as chaves, e para usá-lo, basta importar o styled (import styled from "styled-components").

Dando inspect no browser, podemos ver que o Styled já criou as classes com o hash automáticos junto com suporte para os browsers, como falei anteriormente:

E caso haja hover:

Uma curiosidade do Styled components é que você consegue estilizar um componente já estilizado!

Estilizar um componente já estilizado? Como assim?

Por exemplo, se tenho um componente Button default no meu projeto e quero colocar uma cor diferente pra ele, eu simplesmente “importo” ele.

Essa técnica também é útil pra re-estilizar componentes de lib de UI, como o Material, Reactstrap, etc..

Uma das formas de deixar a marcação mais limpa, o Styled Components tem um método attrs que recebe um objeto que anexa alguns acessórios a um componente estilizado (definição da própria documentação). Digamos que eu tenha um input de formulário para escrever o primeiro nome. No HTML ele ficaria assim:

Grande né? A forma de refatoração com Styled Components seria criar um componente Input e separá-lo dos atributos, fazendo com que somente o Input esteja na marcação, e os atributos (com os estilos, se tiver) em outro arquivo deixando o input em apenas alguns caracteres ao invés de usar 6 linhas.

Se você tiver os 2 exemplos no seu projeto e inspecionar o elemento no browser, vai ver que os 2 são idênticos, com a exceção da hash para a classe CSS que o Styled Components cria automaticamente

Uma observação no attrs é que não é possível disparar eventos com ele, como por exemplo o onClick, onChange, etc., a forma de disparo de eventos seria assim:

A maneira de aumentar a especificidade do estilo com Styled Components é colocando & dentro da estilização, cada & significa uma classe. Problemas com especificidade acontecem quando você tenta re-estilizar um componente de uma lib de UI que contém varias classes CSS por baixo dos panos.

Como eu coloquei 3 &’s, meu Input terá 3 classes geradas pelo Styled Components como mostra na imagem:

Para finalizar, queria mostrar que é possível estilizar com Styled Components a partir de props, criando condicionais para definir qualquer coisa, como por exemplo a cor de fundo de uma div:

Criando dois Containers setando o primeiro como true e o segundo como false temos o resultado:

Bom, para o post não se estender muito, irei parar por aqui. Ainda tem bastante coisa legal sobre Styled Components, mas já dá pra fazer muita coisa com esse conhecimento básico.

Espero que tenha gostado e este artigo tenha sido útil!

Caso você tenha sugestões ou críticas não hesite em comentar!