React com styled-components na prática

Styled-components foram criados na tentativa de melhorar o processo de estilização dos componentes no React.

Essas alterações buscam melhorar a experiência do desenvolvedor e, portanto, refletindo diretamente na qualidade do produto final.

Podemos citar alguns dos diversos pontos positivos da implementação do styled-components em um projeto:

• Rapidez: components estilizados com a biblioteca recebem apenas os estilos necessários e nada mais. Além disso, combinado com code-splitting, é possível otimizar ainda mais o processo de carregamento.
• Estilização dinâmica: adaptar os estilos baseados em props ou temas globais se torna um processo bem simples graças a intuitividade e facilidade criada pela lib.
• Manutenção de código: como cada componente se torna único é bem simples identificar onde está cada estilo. Nada de ficar procurando de onde os estilos estão vindo.

Na prática

Primeiramente vamos instalar a biblioteca com seu gerenciador de pacotes favorito:

yarn add styled-components OU npm i styled-components --save

O que realmente muda?

Bem, no desenvolvimento usual no qual se utiliza divs, Views, entre outras tags para construir a interface do usuário, aqui ainda permanecemos bem próximos disso mas com uma diferença interessante.

Ao invés de criamos uma interface da forma usual,

utilizando o styled-components fica muito mais claro para o desenvolvedor o que exatamente cada pedaço dessa estrutura representa.

Ainda, conseguimos juntar a estrutura + estilização em apenas um único lugar, o que nos menos margens para erros e facilita o processo de debug no futuro, já que a estrutura esta centralizada.

Criando os componentes

Bem, mas onde declaramos essas tags? De onde veio Container, Title, Content e Body?

Essas tags, na realidade são a representa de um elemento comum utilizado na estruturação. Veja o exemplo:

A syntax nesse trecho é bem simples: importamos o styled do styled-components e utilizando template literals podemos estilizar nosso componente.

Podemos ainda passar e receber props dentro do código de estilo.

Apesar dos exemplos acima terem sido criados com base no React para Web, é possível aplicar os mesmos métodos para o React Native (o que fazemos aqui na ez.devs, por sinal).

As diferenças são poucas, entretanto, vale a pena dar uma olhadinha aqui para ver o que muda e quais são as restrições que aparecem.

Extendendo estilos

Acabamos de ver como podemos criar nossos componentes utilizando o styled-components. Entretanto, até agora apenas fizemos uso dos components padrões que o styled fornece.

styled.View (RN)
styled.div (Web)

Em muitos casos, precisamos adaptar um componente já anteriormente criado.

Por exemplo, imagine que nosso projeto faça uso constante de um Button personalizado, mas que em alguns usos precisamos mudar a cor da fonte, padding, altura, etc.

Fazer isso através de props não é algo bacana já que a estilização, nesse caso, seria estática. Felizmente, o styled-components, permite que adaptamos o estilo de um componente previamente criado por ele (ou não).

Isso é possível somente se o componente em questão fazer uso do className por props ou o prop style, caso esteja no RN.

Perceba que o TomatoButton está sendo criado a partir do componentes Button iniciado logo acima. A syntax, por estar extendendo um estilo já existente, muda um pouco.

styled.Button ➡ styled(Button)

Finalizando

Podemos definir o styled-components como uma biblioteca que aproxima a syntax de estilos para o React Web e RN.

Além disso, provê uma forma mais legível e centralizada da construção do layout. Existem alguns outros pontos legais da biblioteca que você pode explorar por conta, a documentação é explicativa e completa.

Agradecemos sua leitura ?! Deixe-nos sugestões para melhorar nosso conteúdo cada vez mais e, se possível, ideais para o próximo assunto.