Utilisation des Modules CSS
Les modules CSS créent automatiquement des noms de classes uniques, permettant ainsi de limiter la portée du CSS à un composant spécifique et d’éliminer les conflits de styles. Des règles CSS simples peuvent être écrites à l’intérieur des modules CSS.
Retour au projet
Créer un module CSS nommé home.module.css dans le dossier app/ui et coller les règles CSS suivantes :
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
Il convient d’importer le fichier home.module.css dans le fichier app/page.tsx, puis d’appliquer la classe styles.circle à l’élément div créé précédemment.
En pratique
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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.08
Utilisation des Modules CSS
Glissez pour afficher le menu
Les modules CSS créent automatiquement des noms de classes uniques, permettant ainsi de limiter la portée du CSS à un composant spécifique et d’éliminer les conflits de styles. Des règles CSS simples peuvent être écrites à l’intérieur des modules CSS.
Retour au projet
Créer un module CSS nommé home.module.css dans le dossier app/ui et coller les règles CSS suivantes :
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
Il convient d’importer le fichier home.module.css dans le fichier app/page.tsx, puis d’appliquer la classe styles.circle à l’élément div créé précédemment.
En pratique
Merci pour vos commentaires !