-
Estilização com React.
-
O React pode ser personalizado
de várias formas.
-
Existem várias bibliotecas de estilos
que favorecem essa personalização.
-
Temos o Styled Components,
temos Tailwind
-
e uma infinita gama de ferramentas
-
que você pode escolher
qual é melhor para você.
-
Vou falar hoje sobre
o Styled Components.
-
Para isso, vamos criar um componente
e customizá-lo
-
utilizando todo o benefício
que o Styled Components já tem
-
pronto e embarcado.
-
Qual é a vantagem disso tudo?
-
Se a gente for olhar
-
o que temos de personalização
disponível no mercado,
-
a gente pode utilizar várias
de acordo com as preferências.
-
O React utilizado
com o Styled Components
-
tem algumas especiais
-
e a gente consegue trazer um pouco
de benefício nessas customizações.
-
Mas, explicando melhor,
-
para que serve essa estilização
com bibliotecas e terceiros,
-
imagina a construção de um site
-
e você precisa customizar
várias partes do seu site.
-
Antigamente,
a gente usava CSS para tudo.
-
Imagina que cada pedaço
do seu código, da sua tela,
-
seja customizada com CSS.
-
Você tem que pegar
elemento por elemento,
-
chamar no CSS e atribuir um parâmetro
na propriedade
-
de cor, de estilos,
de espaçamento,
-
para que isso ficasse
um pouco melhor a visualização.
-
O Styled Components já tem isso
muito embarcado na sua aplicação
-
e para isso,
-
a gente precisa só chamar
esse pedaço de estilo
-
dentro do nosso código
e trazer um pouco de benefício
-
para a nossa explicação.
-
Vamos ao código e eu te explico melhor
como isso funciona.
-
Eu criei aqui um componente
chamado "BotaoEstilizado".
-
Esse botão está importando o Styled
que vem do Styled Components.
-
Então, eu criei uma variável "botao".
-
Essa variável vai receber
todos os estilos
-
que o Styled Components já tem.
-
Perceba que o Styled aqui,
simbolizado nesse import,
-
vai trazer tudo
que o Styled Components tem
-
e permitir que eu utilize
dentro do meu botão.
-
Esses exemplos,
-
background-color, color,
padding, border,
-
eu passo como função
apenas no conceito de chave e valor.
-
Eu tenho um background-color,
eu quero trazer uma cor para ele.
-
Então, essa cor azul,
um pouco mais clara,
-
traz a customização
do meu botão.
-
A cor branca é o label do meu botão.
-
É melhor explicando isso
mostrando na tela, tá?
-
Então, como é que a gente faz
para rodar mesmo?
-
Lá no começo do nosso capítulo,
eu expliquei para vocês
-
que para rodar
a nossa aplicação React,
-
a gente tem que digitar "npm run dev"
para que rode a nossa aplicação.
-
Então, eu vou startar aqui,
dando o enter,
-
e vamos ver o que acontece aqui
na nossa tela.
-
Ele está falando que minha aplicação
já está disponível
-
dentro do localhost 5173.
-
Perceba que ele fez o hot reloading,
mas quebrou a minha aplicação.
-
Ele quebrou de propósito, tá?
-
Eu fiz isso justamente
para você visualizar
-
que não basta apenas declarar
os atributos do "styled-components"
-
para você utilizar.
-
É preciso que ele seja embarcado
na sua aplicação.
-
E para isso,
precisaremos instalar.
-
Então, para não perder aqui
o meu código que já está rodando,
-
mesmo com erro,
eu vou dividir meu terminal.
-
E para isso,
-
você clica aqui nesse botão
chamado "Split Terminal".
-
Ele vai dividir nosso terminal
em duas partes.
-
E vai me entregar aqui uma nova sessão
para que eu digite o código
-
que eu preciso para instalar.
-
Então, o comando que vou utilizar
é o "npm install styled-components"
-
Explicando esse comando,
-
eu estou pedindo
para o Node Package Manager
-
instalar essa biblioteca
que está disponível
-
a partir das nossas interfaces
pré-prontas dentro da internet.
-
Digitando
"npm install styled-components",
-
basta dar o enter,
-
ele vai baixar a biblioteca
para o meu projeto.
-
Vamos aguardar o término.
-
E já, muito rápido,
ele instalou a biblioteca.
-
A gente pode conferir isso
olhando para o nosso "package.json".
-
Ele trouxe aqui dentro
das nossas dependências,
-
além do React e do React DOM,
que já são naturais da aplicação,
-
ele trouxe agora
o "styled-components".
-
Então, significa dizer que agora sim
eu posso utilizar
-
o que está importado.
-
Voltando para o nosso código,
lembrem que eu instalei aqui, olha,
-
importei, aliás,
o "styled" do "styled-components".
-
E aí, permitiu que eu usasse
o "styled-button"
-
para decorar esse botão.
-
Não está rodando aqui ainda
porque eu tenho que quebrar
-
a minha aplicação
com o comando "ctrl+ C"
-
onde está dando o erro aqui,
eu dou o "ctrl + C"
-
e rodo novamente a minha aplicação
com o comando "npm run dev".
-
Dando enter,
ele vai fazer o hot reload
-
e vai atualizar instantaneamente
aqui a minha tela com o erro.
-
Ele já trouxe o meu botão
totalmente decorado,
-
com o clique aqui,
-
que está sendo chamado
dentro do meu botão estilizado,
-
que é esse botão aqui,
e as propriedades de estilos.
-
Esse componente que eu criei
foi só para dar a decoração
-
para o meu botão.
-
E a função aqui embaixo,
é onde ele renderiza o botão estilizado.
-
Então, vamos entender
esse código e como ele funciona.
-
Tenho aqui meu botão,
esse botão está recebendo
-
tudo o que o "styled" fornece,
eu pego o "button" dele
-
e coloco para esse botão.
-
Então, eu escrevo o seguinte...
-
Vale inclusive olhar que nós temos aqui
uma crase,
-
que é uma aspa invertida,
ele abre aqui em cima
-
e fecha aqui embaixo.
-
É dentro dessa crase aqui,
que a gente chama de "literals",
-
posso passar meu conceito
chave e valor.
-
Onde está o meu botão,
a cor do meu botão,
-
a cor do label do botão
e todos os atributos
-
que ele precisa para funcionar
e ficar nesse estilo aqui.
-
Vamos fazer uns testes.
-
Então, perceba que eu tenho aqui
a cor branca do meu label,
-
e se eu quiser trocar a cor
do meu botão para um laranja,
-
vamos dizer assim,
basta eu passar,
-
e se eu souber de cor, é claro,
a cor do meu hexa,
-
eu passo aqui e ele vai trocar
a cor do meu botão para laranja.
-
Não, a leitura não ficou muito boa,
-
vamos deixar com o branco mesmo
para continuar o nosso exemplo.
-
Perceba que está branco aqui.
-
O "padding" 10px e 20px
-
significa dizer que eu tenho 10 pixels
para cima e para baixo,
-
que é esse espaçamento aqui,
entre o clique aqui,
-
topo do botão e a parte baixa
do botão.
-
E 20 pixels para a direita
e para a esquerda,
-
onde está aqui o meu "i"
e onde está o meu "c",
-
eu tenho 20 pixels.
-
Posso aumentar,
-
e você vai continuar visualizando ali
instantaneamente,
-
que esse botão está se comportando
a partir do momento
-
que você modifica alguns parâmetros
-
que o "styled-components" já trouxe
pré-definidos para gente.
-
O "border-radius" que é essa curva
que o meu botão faz,
-
está com 5 pixels.
-
Se eu passar 25 pixels aqui,
-
ele já muda e deixa mais
arredondado ainda.
-
Então, você consegue perceber
-
que apesar de você ter a biblioteca
pronta,
-
você consegue dar um pouco
de personalização ao estilo
-
que ele está te fornecendo também.
-
E esse "pointer" aqui
é o dedo do mouse.
-
Quando eu encosto o mouse aqui,
ele tem uma seta.
-
Quando eu encosto no botão,
ele assume o dedo para clique.
-
Então, ele está nesse "cursor pointer".
-
E quando eu passo o mouse
no meu botão,
-
ele muda de cor para um azul
um pouco mais escuro.
-
Está sendo passado aqui
nesse "background-color".
-
Caso você queira trocar
o comportamento,
-
dessas chaves que estão setadas no nosso estilo.
-
Exporto aqui a função botão estilizado com o botão clique aqui e
-
utilizo ele dentro do meu app.jsx, onde ele fica disponibilizado
-
aqui.
-
Se eu quiser duplicar, basta eu criar um segundo botão e faço as
-
cores para outro botão.
-
Posso usar aqui o botão 2 e aqui no botão 2 eu crio outras
-
diversidades de estilos para esse meu botão.
-
Se eu estou passando aqui o botão 2 como o meu botão, eu preciso
-
criar aqui uma nova função, botão 2, e estilizar da forma que eu
-
desejo.
-
Como eu quero manter como está, eu vou deixar o botão 1 com as
-
mesmas cores.
-
Só para você entender que componente a gente pode reaproveitar tanto
-
a parte padronizada dele que você já deu, como você pode customizar
-
um para cada estilo que você desejar.
-
Utilizando esse conceito de reaproveitar componentes estilizados,
-
você pode ver no exemplo bem simples aqui que eu fiz no botão, você
-
pode expandir essa mesma forma para um card, para um título, para um
-
input, um formulário completo que você queira personalizar.
-
E toda a página que você precisa customizar, você precisa declarar
-
essa página onde você quer importar o estilo personalizado.
-
Como eu falei anteriormente, o estilo de componente é só um meio de
-
biblioteca que a gente tem disponível para estilizar.
-
Você pode explorar outras bibliotecas aí e visualizar lá no get
-
started dele como você faz para instalar essa biblioteca no seu
-
projeto.
-
Olhe sempre para o npm install dele.
-
Não basta apenas você ter essa biblioteca dentro do seu projeto, você
-
precisa trazer toda a parte de estilos que ela fornece para você para
-
dentro do seu projeto.
-
Ele tem que ser global, ele não pode ser só colocado na página que
-
você quer colocar.
-
Você precisa ter ele declarado, importado e quando você for utilizar
-
o seu projeto, você pode fazer a instalação dele e reaproveitar ele
-
em qualquer parte do seu código.
-
Eu espero que tenha sido proveitoso essa explicação de estilos.
-
Como eu reforcei, você pode modificá-la como você desejar e entender
-
que toda a parte de componentes tem seu estilo próprio ou você pode
-
reaproveitar o que vem nativo do React ou você pode importar outra
-
biblioteca de estilo para que você coloque a sua personalização.
-
Vale ressaltar que por mais que existam várias formas de você fazer
-
essa customização, não use muitas bibliotecas de estilos no mesmo
-
projeto.
-
Isso vai contribuir com que seu projeto perca um pouco da
-
personalização que você criou, uma vez que esses elementos têm
-
comportamentos próprios e você precisa trazer ele exclusivo na classe
-
exclusiva que você quer personalizar.
-
Quando você coloca mais que uma biblioteca de estilo no seu projeto,
-
você acaba perdendo essa flexibilidade de personalização.
-
Agora é a sua vez.
-
Você viu que durante esse capítulo a gente criou uma aplicação React
-
do zero e fizemos algumas adições de estilos, de eventos, de
-
comportamento que a biblioteca fornece pra gente.
-
É hora de praticar e testar com suas aplicações na vida real.