Utilizando Styled Components (CSS-in-JS) no ReactJS e React Native | Diego Fernandes

Com o grande crescimento do Javascript, a estilização começou a ser migrada também para o JS formando o conceito CSS-in-JS ou JSS, que significa alocar o código de estilização dentro do código Javascript.

O Styled Components é uma biblioteca feita para React/React Native que permite a criação de componentes estilizados garantindo várias melhoras na produtividade com integrações aos funcionamentos do React em si.

-----

Acompanhe a Rocketseat nas redes sociais:

[annasena]

Muito bom! Sua metodologia é incrível!

[thiagodias]

Conteúdo atemporal! Obg, irei fazer um teste técnico utilizando styled-components. Com esse conteúdo ficou mais claro como criar estilos específicos para os meus componentes, como post, botão, etc.

[jamesonbatista]

GENIAL.... esse rapaz é GENIAL....seus vídeos tem me ajudado DEMAIS... peço a Deus que lhe ajude ainda mais nessa vida

[marceloneri]

53 mil inscritos é uma pobreza para a grandeza deste canal. Parabéns por mais um vídeo "matador". Rocketseat é fonte de referência permanente.

[eduardonoronha]

Excelente didática, consegui entender tudo sem nenhuma pedra no caminho. Parabéns!

[flaviasilva]

Show. Muito Legal. Estou fazendo o Ignite, e estou ficando viciada em assistir os vídeos dessa galera.

[juloko]

Não me canso de elogiar, os vídeos são incríveis. É um ganho de produtividade imenso nesses vídeos. Até a trilha do vídeo é muito boa.

[danidaniel]

Que vídeo delicioso! Por mais vídeos assim, direto ao ponto, o vídeo deveria seguir o título. Esse vídeo é excelente, não apenas por ser direto com o styled components, mas tudo é passado de forma tão simples e enriquecedora que dá pra sacar coisas do próprio React.

[allisondealmeida]

a um mês estou estudando javascript já realizei o curso básico es6 da plataforma de vocês, e tudo que busco no YouTube sobre javascript caiu em um vídeo de vocês kkkk vei vocês são pica.

[code-island]

vlw patrão vc é muito fera, um dia quero conhecer vc

[AndressaMonteiro]

Muito claro e objetivo o vídeo, excelente! Amo trabalhar com Styled Component, muito prático e o vídeo passa isso de forma direta.

[melhoresmomentosfutebol]

Eu já usei o Styled Component em um projeto (que já estava sendo feito) e eu achei horrível. Utilizando estilização com componentes com SCSS é possível usar mixins, variáveis, imports tudo dentro do SCSS e reaproveitando tudo no projeto sem a necessidade de criar essa quantidade de encadeamentos e componentes. Acho que é interessante estudar e acompanhar as técnicas e principais ferramentas de Desenvolvimento no mercado, mas essa styled components complica mais o projeto do que ajuda em relação a alternativa do SCSS separado. Posso estar enganado mas em mais de 1 ano de React nunca vi um projeto onde o styled component fosse realmente fundamental ou que melhorasse o workflow.

[douglasalbuquerq]

Muito bom o video, direto e efetivo!! obrigado!

[sidneijunior]

Muito bom, uma boa introdução ao styled component

[rafavicenzo]

Me ajudou a entender como o Material-UI funciona, vlw.

[fabiosantos-xpcommerce]

Eu entendi e gostei basntante do video.
Apesar de ainda achar que é melhor trabalhar com arquivos separados e classes. Principalmente para fazer sistemas saas que precisam ter caras diferentes.

[tubanami]

rapaz q parada insana, valeu por compartilhar!

[thiagosoares]

Se exportamos o component com o nome da função que gera o estilo, como fazemos para aplicar as funcionalidades ao component?

[jfdvalente]

Já tô na área para aprender mais com os melhores do Brasil!

[wanderson]

Foi ótimo conhecer Styled Components! Grato!