Índice:

React com styled-components na prática

Índice:

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,

Figura 1 – Código sem styled-components

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

Figura 1 – Código com styled-components

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:

Figura 3 – Criando os componentes

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.

Figura 4 – Passando e recebendo props

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.

Figura 5 – Extendendo estilos

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.

Publicado por:
Compartilhe:

Conheça a Kody, sua nova gerente de projetos com IA!

Posts relacionados

Refinamento de backlog, também conhecido como grooming, é uma parte vital do desenvolvimento ágil. Basicamente, trata-se de revisar e priorizar os itens do backlog do produto, garantindo que as histórias

medir deployment frequency

Você já se perguntou quantas vezes sua equipe de desenvolvimento faz deploy de código em produção? A resposta a essa pergunta é conhecida como “deployment frequency” (frequência de deploy). Esse

cultura developer experience

A developer experience (DX) é um fator crucial para a produtividade e satisfação dos desenvolvedores. Uma cultura focada na DX não só melhora a moral da equipe, mas também resulta