Trabalhando com Módulos CSS
CSS Modules criam automaticamente nomes de classes únicos, permitindo o escopo do CSS para um componente específico e eliminando conflitos de estilos. Regras CSS simples podem ser escritas dentro dos CSS Modules.
De volta ao projeto
Criar um módulo CSS chamado home.module.css dentro da pasta app/ui e colar as seguintes regras CSS:
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
O arquivo home.module.css deve ser importado no arquivo app/page.tsx e, em seguida, a classe styles.circle deve ser aplicada ao elemento div criado anteriormente.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
How do I create a CSS module in the app/ui folder?
Can you explain how to import and use the CSS module in page.tsx?
What does the .circle class do in this example?
Awesome!
Completion rate improved to 2.08Trabalhando com Módulos CSS
Deslize para mostrar o menu
CSS Modules criam automaticamente nomes de classes únicos, permitindo o escopo do CSS para um componente específico e eliminando conflitos de estilos. Regras CSS simples podem ser escritas dentro dos CSS Modules.
De volta ao projeto
Criar um módulo CSS chamado home.module.css dentro da pasta app/ui e colar as seguintes regras CSS:
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
O arquivo home.module.css deve ser importado no arquivo app/page.tsx e, em seguida, a classe styles.circle deve ser aplicada ao elemento div criado anteriormente.
Na Prática
Obrigado pelo seu feedback!
