Styled Components no React

Introdução

É muito comum uma certa resistência ao uso do Styled Components, eu mesmo não dava o braço a torcer e demorei a utilizar essa biblioteca. Hoje em dia eu não desenvolvo sem ela.

O objetivo desse post será te convencer a dar uma chance para o CSS-in-JS e mostrar um pouco das vantagens de se utilizar o Styled Components. Vamos nessa!

O que é o Styled Components?

Trata-se de uma biblioteca que nos permite escrever códigos CSS dentro do JavaScript, evitando a importação de arquivos .css.

Por se tratar de uma biblioteca, devemos instalar com o npm ou o yarn. Exemplo utilizando o yarn:

yarn add styled-components

Utilizando o Styled Components

Como o próprio nome já diz, a biblioteca nos permite criar componentes estilizados. Para começarmos devemos importá-la no nosso projeto.

import styled from "styled-components";

Com o pacote importado, basta criarmos um componente informando o styled seguido da tag HTML que desejamos criar, e de dois backticks, onde colocaremos o CSS.

const MeuComponente = styled.div`
    background: grey;
    width: 100px;
    height: 200px;
`

Com o MeuComponente criado, podemos utilizá-lo normalmente no nossa aplicação, como uma div:

return (
    <MeuComponente>
        Conteúdo
    </MeuComponente>
)

Por padrão, ao utilizarmos o Styled Components, criamos um arquivo separado para os componentes personalizados, normalmente chamado styles.js. Nesse arquivo nós criamos os componentes e os exportamos:

import styled from "styled-components";

const MeuComponente = styled.div`
    background: grey;
    width: 100px;
    height: 200px;
`

export const MeuBotao = styled.button`
    background: green;
    width: 50px;
    height: 22px;
    border: none;
`

Agora, para utilizá-los em outros arquivos, basta fazermos a sua importação:

import React from 'react'

import { MeuComponente, MeuBotao } from './styles.js'

const Page = () => {
    <MeuComponente>
        <MeuBotao onClick={() => {}}/>
    </MeuComponente>
}

export default Page;

Como podemos perceber, o uso de componentes estilizados torna a estrutura da página muito mais semântica!

Extendendo estilos

É muito comum precisarmos utilizar componentes com estilos semelhantes, e para evitar a necessidade de repetirmos o código, o StyledComponentes nos permite herdar o estilo de um objeto.

Por exemplo, vamos supor que criaremos dois botões em uma tela, sendo que a única diferença entre eles é a cor.

const PrimeiroBotao = styled.button`
    width: 100px;
    height: 22px;
    border: none;
    border-radius: 2px;
    background-color: red;
    padding: 5px 10px;
`

Claro que copiar e colar esse código para criar o segundo botão não nos tomaria muito tempo. Porém, podemos fazer isso de forma muito mais limpa:

const SegundoBotao = styled(PrimeiroBotao)`
    background-color: green;
`

Ou seja, o SegundoBotao possui todas as propriedades do PrimeiroBotao, alterando apenas a cor do background.

Aninhamento

Assim como o CSS puro, o StyledComponents nos permite aninhar elementos estruturais e manipular o filho a partir do pai:

 return (
     <MeuComponente>
        <span> Texto a modificar </span>
     </MeuComponente>
 )


  const MeuComponent = styled.div`
    width: 100px;
    height: 100px;
  
    span {
        color: red;
    }
  `

No exemplo acima modificamos a cor do span para vermelho.

Vantagens

Com a biblioteca, podemos utilizar tudo que o CSS oferece aliado com o JavaScript! Assim, podemos trabalhar com valores do próprio JS, tornar o código mais semântico e com escopos mais definidos.

Conclusão

O começo com o Styled Componentes pode ser um pouco estranho, mas a curva de aprendizado é super baixa e logo é possível perceber os seus benefícios. Quem quiser saber mais sobre as features dessa biblioteca, basta ler a sua documentação.

Se surgirem dúvidas ou sugestões, não deixem de mandar aqui nos comentários!