DEV Community

loading...

Uso do Styled Components no React

ino_gu profile image Gustavo Inocencio ・2 min read

Na implementação de estilos para sua página o desenvolvedor tem a mão várias formas de incluir estilos. Desde o velho CSS até o uso de pré-processadores como Sass.

Ultimamente uma forma de inclusão de estilos que vem se destacando é a CSS-in-JS. Considerando a utilização de componentização em JavaScript, visando a reutilização dos mesmos componentes em diversas telas economizando tempo de desenvolvimento e a criação de soluções seguindo um design estabelecido para o sistema inteiro, o uso de CSS dentro de um componente Javascript pode ajudar nessa demanda.

Além disso, já é conhecido dos desenvolvedores que a colisão de estilos é um obstáculo que ocorre bastante nos projetos. Ela acontece quando você estiliza uma tag sem o uso de classes ou cria classes com os mesmos nomes para estilizar seus elementos.

E isso aumenta o uso de !important, uma manobra que pode ser traiçoeira ao realizar a manutenção do sistema depois, já que pode acabar fazendo necessário o uso de outro !important

Utilizando o CSS-in-JS esse problema não ocorre.

Explorando um pouco do universo de CSS-in-JS, existem algumas libs mais conhecidas:

O Styled Components, objeto de análise desse artigo, foi desenvolvido para que o desenvolvedor tenha uma maneira mais fácil de lidar com CSS nos componentes de aplicações React.

As vantagens presentes na lib são:

Critical CSS Automático: Os componentes são renderizados e injetam apenas seus estilos contribuindo para uma menor quantidade de código para o usuário final.

Sem colisão de classes: O styled-components fornece nomes de classes a prova de colisão. Nada mais de quebrar a cabeça só porque precisa mudar a posição ou cor de um objeto. Além disso, tudo que você precisa vai estar no próprio contexto do componente, facilitando o desenvolvimento.

Uso apenas do CSS necessário: Funcionando diretamente nos componentes, ajuda a diminuir o código final, pois o que não é necessário pode ser removido.

Estilo dinâmico simples: Adaptando os estilos baseando nas props recebidas, é possível criar estilos dinâmicos de forma fácil e intuitiva.

Vendor prefixing automático: Você escreve seu CSS no melhor padrão do mercado e pronto, os componentes cuidam para fornecer suporte para browsers antigos.

Exemplo de uso:

image

Discussion (0)

pic
Editor guide