fala Mestres beleza no vídeo de hoje nós vamos dar uma olhada aqui no que que é o CSS injs para revisar esse conceito aí e aplicar um exemplo usando Star comps no nosso projeto tá então antes da gente ir pro conteúdo gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também siga a gente nas redes sociais os links estarão todos aí na descrição meu nome é Janer sou desenvolvedor aqui na Mestres e bora lá para mais um conteúdo bom então eu estô aqui na documentação oficial do Next Onde fala
sobre né o csss e aqui tem umaa de todas as bibliotecas que nós teramos acess aí fazer implementando de fato CSS em JS e o que que é né o CSS em JS como o nome F né que é o CSS no JavaScript é uma ideia onde a gente basicamente usa o JavaScript para definir o CSS então eu uso o JavaScript para definir os estilos que serão aplicados ali nos meus elementos então de todos esses exempl esses exemplos aqui a gente teria essa ideia né de de estar aplicando o CSS direto do JavaScript e tem
um detalhe né porque tudo isso de CSS EMS ele nós quando nós falamos disso né Nós estamos falando de client components então do lado do servidor essas bibliotecas elas não não vão funcionar bem e e isso pode ser um problema né um impeditivo ali ou algo que não fique tão interessante pra nossa aplicação porque a gente vai acabar tendo que converter bastante coisa PR e client component quando não deveria ou então isso pode ser bom no sentido de Guiar a gente para desenhar a estrutura né ali da nossa das nossos componentes da nossa aplicação de
um formato um pouco mais inteligente um pouco mais interessante Então Então a gente vai ter sempre esse cuidado na hora de de tá criando o estilo na hora de tá criando ali um elemento porque ess quando a gente tá usando isso né porque se a gente quiser de fato usar essas ferramentas de uma forma mais produtiva a gente tem que de fato se preocupar e tomar cuidado porque na verdade não vai funcionar né se a gente usar o server component ele dá um erro lá então a gente tem sempre que tá trabalhando com client component
para isso aqui funcionar razoavelmente bem tá então ele tem todas essas opções né tem os links aqui para todas essas e nós iremos usar o Style components então eu já tô aqui com o projeto o projeto meu eu já instalei né Style components eu rodei aqui ó um npm install Style components baixou a versão 6.1.8 e rodei o servidor né então nosso servidor já tá rodando eu já tenho aqui a nossa alguma tela né vamos ver aqui o que que tem Qual tela que ele tá tá aqui no Hello from product screen na tela de
produto Então vamos lá aqui em produto pra gente começar a usar que na verdade a gente não começa a usar por aqui né a gente tem que configurar o sty de componentes na nossa aplicação então direto já no next config nós temos que nós podemos né temos na verdade que configurar aqui pro compilador dizer que nós estamos aqui com Style de components passar isso aqui como true para ele já começar a funcionar implementar aí Alguns eh script no momento da compilação para que o Style de components funcione então a gente habilita ele aqui e uma
vez habilitado nós precisamos criar um registro né E esse registro isso aqui tá documentado nós temos aqui na documentação onde ele fala aqui ó tem aqui uma aba né do st components E ele fala que nós precisamos dessa componente global de Registro para coletar todos os estilos CSS né gerados durante a renderização e e e é basicamente uma função que retorna esses essas regras né do CSS então é tem uma implementação aqui essa é a implementação que nós vamos usar então basicamente ele usa aqui um hul né do do nosso do próprio next né ele
importa isso aqui ó next navigation para basicamente pegar esses estilos que foram gerados e colocar esses estilos no cabeçalho do nosso HTML para que nossas componentes consiga tá fazendo referência e tá fazendo uso aí desses estilos então tem esse Hook tem aqui algumas coisas específicas do Style de components e no final ele retorna essa Style sheet Manager com um tildren aqui dentro então esse arquivo né é uma US Client então isso aqui é montado do lado do cliente e nós iremos pegar ela aqui pra gente e vamos criar esse arquivo né um arquivo de registro
um componente lá no nosso projeto tá então vou vir aqui na raiz do src vou criar um novo arquivo chamado registry tsx né e vou colar esse cara aqui ele não vai dar erro porque daria erro se eu não tivesse o inst de componentes instalar mas eu já tenho tá nesse projeto aqui também nós já estamos com o react com o Next navigation Então tá tudo certo e aí uma vez que nós temos esse registro criado nós iremos basicamente aplicar ele na raiz da nossa aplicação então a raiz da nossa aplicação tá aqui no layout
né na estrutura aí do nosso app Navigator né no diretório aqui app então na raiz nós temos o layout que dentro do layout nós renderizamos aí a rota que nós estamos atualmente então aqui por volta de Children ó vou colocar aqui por volta essa componente que nós acabamos de criar que é o Style de components registry né então aqui eu vou ter a pega component register já importou aqui para mim e eu coloco Children aqui dentro Beleza então com esse passo aqui feito Agora sim nós Já conseguimos montar aí essas nossas componentes então e ver
de fato Como que é o CSS em JS especificamente com Style de components então eu vou vir aqui na na página que já tá aberta lá né no a página de produto e aqui nela nós temos um título né que seria esse H1 então se eu volto aqui vamos voltar aqui na página é esse título né então o que que eu vou fazer eu vou transformar ele em uma componente essa componente ela já vai est estilizada usando aí sty components que é basicamente consequentemente usando o CSS injs Então vamos voltar aqui no vs code e
esse H1 eu vou criar aqui fora eu tenho né a componente product eu V criar aqui uma nova componente eu V chamar ela de title e essa e essa constante né que seria aí a minha componente ela vai ser o sty e styled a gente importa de Style components então aqui eu digito Style ponto e aqui eu já tenho acesso a todos os elementos do HTML a maioria né para não falar todos que eu não tenho certeza mas a os principais nós temos aqui então por exemplo esse título meu ele tá aqui como H1 então
eu posso dar um Style de ponto H1 ou insty de ponto P né que seria um parágrafo enfim nós temos muitas opções aqui então vou criar um H1 poderia ser um header poderia ser várias coisas eu vou criar aqui um H1 e depois de criado nós colocamos aqui crases né então dentro dessas crases que ele considera como um string eu vou passar os estilos então por exemplo eu quero color Head e isso aqui já é CSS eu quero Font size né Opa Font size do e vamos passar maior né 20 pixs enfim aqui eu passaria
todos os meus estilos E aí essa constante title que eu criei eu uso ela aqui como componente né como tag vou colei aqui vou apagar o H1 e digitar title Beleza então dessa forma eu posso salvar isso aqui e ele vai entender né que title é um H1 só que esse H1 ele já vem estilizado ele já vem com o JavaScript com o CSS e pro CSS funcionar aqui eu tô usando para ter o Highlight né o syntax Highlight aqui do vs code porque isso aqui é uma string né uma string JavaScript para isso aqui
funcionar eu instalei uma extensão que é a sty vs code né sty components E essa extensão que vai dar pra gente aí o Highlight do e enfim todo o Highlight que a gente precisa na hora de escrever o CSS Então eu só isso aqui vamos olhar aqui no navegador e vou atualizar isso aqui ele deu um erro beleza Olha só o erro que eu tô falando né ele acabou dando esse erro porque o que que acontece foi o que nós falamos lá no início as o CSS EMS nós podemos usar basicamente temem componentes do cliente
né client components essa componente aqui ela é uma server component n Então ela tá do lado do servidor e do lado do servidor não vai funcionar esse meu CSS em JS então para resolver eu tenho que colocar aqui no início né o user Cent e se você tiver mais perdido aí em relação ao server component client component nós temos vários vídeos aí no can no canal Então você podem estar dando uma olhada aí uma pesquisada para entender melhor o que que é client e server components mas aí ó coloquei lá o US client e ele
já funcionou tá então se eu inspeciona isso aqui a gente pode ver que nós temos um H1 né um H1 ele foi atribuído a ele uma classe né E essa classe ela é referente a um estilo que esse estilo foi criado pela pelo Style de components tá então e ele foi atribuído aqui no CAB do meu documento HTML e aí dessa forma é dessa forma né que o ST components que a gente vai conseguir est estilizando algumas funcionalidades do st components a gente pode ter algum problema para usar como por exemplo tema né tema aplicação
de temas a gente pode ter algum certo problema porque volta nesse nesse nessa especificação de que tudo isso aqui tem que ser client components né então o tema ele faz uso do contexto e o contexto o contexto do react então a gente começa a ter um pouco de e probleminhas aí para tá fazendo o uso tá então é uma forma interessante de estilizar eh fica bem prático para usar né quando a gente tá programando aqui fica bem tranquilo bem legível né pra gente criar o CSS assim criar as componentes assim já estilizadas então Isso facilita
um pouco mas pode ser que tem a gente tem que adaptar um pouco aí a estrutura da nossa aplicação para que tudo isso funcione Tá certo então para essa aula aqui é isso eu espero que eu tenha ajudado qualquer dúvida pode deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima
