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).
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.
No atual cenário de desenvolvimento de software, a pressão por eficiência e velocidade de entrega nunca foi tão intensa. Empresas de todos os tamanhos estão buscando maneiras de acelerar o
Quando falamos em gestão de um time de engenharia de software, os principais desafios que vem à cabeça são como estimar as atividades, e como lidar com as expectativas dos
Se você trabalha na área de engenharia de software, e se interessa por gestão de projetos, com certeza já deve ter ouvido falar na metodologia Shape-up ou no produto desenvolvido