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.

Você perceba que ele fez o hot reload,
mas quebrou a minha aplicação.

Ele quebrou de propósito.

Eu fiz isso justamente para você visualizar que não basta apenas você

declarar os atributos do estado de component 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 eu vou utilizar é o npm install installed

-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 installed-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 já instalou a biblioteca.

A gente pode conferir isso olhando para o nosso Package.json. O nosso

Package.json, ele trouxe aqui dentro das nossas dependências, além do

React, do React DOM, que já é natural da aplicação, ele trouxe agora

o installed-component.

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, importei,

aliás, o installed do installed-component.

E aí permitiu que eu usasse o installed-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 rundev.

Dando o 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

installed fornece, eu pego o botão 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, que eu

posso passar meu conceito de chave 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

desse 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 10 e 20 significa dizer que eu tenho 10 pixels para cima

e para baixo, que é esse espaçamento aqui, entre o clique aqui e o

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 do que o estado de

componente já trouxe para ele ser pré-definido.

O border radius, que é essa curvinha que o meu botão faz, ele 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 dedinho do mouse.

Quando eu encosto o mouse aqui, ele tem uma seta.

Quando eu encosto no botão, ele assume o dedinho 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, basta você alterar o valor

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.