FEMD CAP01 2025 VA04 REACT ESTILIZACAO

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.