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.

As principais diferenças entre CSS e Styled Components

A sintaxe:

<div className="container">
  ...
</div>


<Container>
  ...
</Container>

 

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:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`

 

Para estilizar um Styled Components você usa (template strings)[https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/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:

.container:hover {
 ...
}

const Container = styled.div`
  &: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.

const Button = styled.button`
  cursor: pointer;
  font-size: 16px;
  padding: 15px 32px;
  text-align: center;
`

const ButtonSubmit = styled(Button)`
  background-color: #0077B5;
  color: #fff;
`

 

Essa técnica também é útil pra re-estilizar componentes de libs de UI, como o Material UI, 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:

<input 
  id="firstname"
  name="firstname"
  placeholder="Your first name.."
  type="text"
/>

 

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.

<Input />

const Input = styled.input.attrs({
  id: "firstname",
  name: "firstname", 
  placeholder: "Your first name..",
  type: 'text'
})``

 

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 igual disparamos normalmente:

<Button onClick={() => setActive(active)}>Ativar</Button>

 

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.

<Input />

const Input = styled.input.attrs({
  placeholder: "Your first name..",
})`
  &&& {
    width: 200px;
    height: 20px;
  }
`

 

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

 

<Container active={active} />

const Container = styled.div`
  background-color: ${props => props.active ? '#0077B5' :  '#0f0'};
  height: 100px;
  width: 100px;
`

 

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!