fala Mestres beleza no vídeo de hoje nós vamos estar falando aqui sobre os módulos do CSS dentro do Next né A gente vai ver um exemplo disso aqui funcionando entender eu vou explicar um pouco eh o que qual que é o conceito né E a gente vai ver isso aqui na prática tá então antes da gente ir pro conteúdo Eu gostaria de pedir que você deixa o like aí no vídeo se inscreva no canal e também siga as redes aí da mestres que os links estarão na descrição para você ficar sempre atualizado aí do que nós estamos fazendo Beleza meu nome é Janer sou desenvolvedor aqui na Mestres e vamos embora lá para mais um [Música] conteúdo bom então eu tô aqui com o meu projeto aberto né esse projeto é o que a gente vem usando aí durante todas as aulas do curso Então tem bastante coisas aqui já criada bastante rota bastante eh coisa implementada né que eu vim desenvolvendo durante as aulas e eu estou aqui na nossa rota né na nossa função home né que seria a página inicial aqui dentro do nosso app né então voltando nas aulas lá de navegação né o page tsx né o arquivo e tsx que retorna aí uma função e essa essa seria aí a nossa página inicial do nosso projeto então aqui quando eu acesso localhost 3000 né ele renderiza aqui um Hello from home screen que é o meu H1 né um H1 que é o Main seria essa componente aqui né Essa função home que eu estou retornando aqui dessa desse arquivo page Então dentro desse arquivo eu vou querer estilizar né então para aplicar o CSS aqui eu vou usar o módulo CSS né o CSS modulos e o que que é esses módulos CSS eh qual que é o problema na verdade quando nós temos um CSS Global né que aqui nós já temos o arquivo globals. css que é um arquivo que veio junto com o template né então esse template ele tá sendo importado aqui do nosso layer dentro do nosso layer layout né layout tsx e quando eu tenho um arquivo global de CSS e não necessariamente é esse globals. css mas pode ser eu posso criar um arquivo CSS específico aqui para settings né para configurações pra página de configurações e dentro desse arquivo CSS eu vou definir classes né ou selectors da forma aí que eu quiser estilizar e quando eu faço isso num arquivo CSS comum essa classe que eu defino no CSS ela vai ser uma classe global e eu posso utilizar essa classe em diferentes elementos em diferentes locais aí do meu HTML e aquele mesmo estilo vai ser aplicado porque esse CSS por padrão ele vai ter esse escopo aí mais geral né mais Genérico e o CSS modular né que são CSS modules ele vai ter um escopo fechado então sempre que eu crio um arquivo de CSS modular as classes que eu defino dentro desse arquivo Elas serão únicas pro projeto Então por mais que eu crie por exemplo uma classe contêiner que é o exemplo que eu vou dar eu vou criar uma classe contêiner paraa minha página home e eu também vou criar a mesma classe contêiner pro meu por exemplo perfil né e as duas classes Elas serão classes diferentes por conta desse tratamento a de CSS modular então não vou ter estilo conflitando né por conta de classes com o mesmo nome um estilo sobrescrevendo outro a gente não vai ter esse problema que seria um problema que nós teríamos se nós usássemos aí o CSS da forma mais comum que seria desse desse essa abordagem um pouco mais Global tá então aqui em page né na verdade aqui na raiz do meu App eu vou criar um novo arquivo chamado eu vou chamar de app.
module. css Então esse esse arquivo CSS modular ele pode estar em qualquer lugar tá eu o padrão que a gente costuma seguir é criar um arquivo de CSS referente à aquela página aquela tela aquela componente que eu estou criando então quando eu crio aqui w. m.
CSS significa que esse CSS vai ser usado aqui na minha página né do na minha home né do meu do meu projeto Então logo aqui aqui dentro desse CSS do app modle CSS eu vou criar aqui a classe coner eu vou definir aqui um background color vamos brincar aqui com background color pra gente ver esses diferentes CSS sendo aplicados então aqui na Raí eu vou definir a cor de fundo como Blue certo a classe coner então lá na minha página o que que tenho que fazer eu tenho que importar esse arquivo então eu vou importar vou chamar de Styles Styles from esse arquivo né app. mod pcss que foi o que eu acabei de criar então aqui nesse nessa minha tag Main né que seria a tag aí que tá por volta da minha página home eu vou passar aqui o classname que seria né como eu defino a classe aqui no react então a classe desse meu elemento HTML vai ser Styles container né onde container foi a classe que eu criei então quando eu salvo isso e a gente voltar aqui eu posso ver que a minha tag M ela tá azul né tá com a cor de fundo azul e se a gente olhar a classe que foi criada olha só a classe ó tem um app underline container né underline underline e um código ou seja esse App é o nome do arquivo que eu criei né Desse arquivo de CSS modular contêiner é a classe que eu criei né classe contêiner e esse código aqui foi gerado pelo CSS mod né então isso aí vai garantir pra gente que essa classe ela é única por mais que eu crie outras classes chamadas contêiner elas estarão em arquivos diferentes e elas est elas terão também códigos diferentes né que isso aqui é gerado aleatório Então essas classes elas não se sobrescrever né os estilos não vão ser aí substituídos e quando eu faço como quando eu faço isso né eu posso por exemplo vir aqui em profile que seria a nossa tela de perfil né Ela é uma tela um pouco mais complicadinha tem uma lógica a mais aqui né mas aqui isso aqui também vai funcionar ela é uma uma componente client né o US client é uma componente que vai ser vai ser montada e criada do lado do cliente mas aqui também eu posso criar ó dentro de profile novo arquivo vou chamar aqui de profile p module. css vou criar aqui a classe coner só que aqui o background color vai ser amarelo tá então aqui nessa minha página né eu vou importar o CSS então Import Styles PR profile pm.
