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 collisions de style. Des règles CSS simples peuvent être écrites à l'intérieur des modules CSS.
Retour au projet
Créons un module CSS appelé home.module.css à l'intérieur du dossier app/ui et collons les règles CSS suivantes :
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
Nous devons importer le fichier home.module.css dans le fichier app/page.tsx puis appliquer la classe styles.circle à l'élément div que nous avons 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
Can you explain how CSS Modules prevent style collisions?
What does the `styles.circle` class do in the UI?
Can you show me how to structure the `home.module.css` file?
Awesome!
Completion rate improved to 2.08Modules 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 collisions de style. Des règles CSS simples peuvent être écrites à l'intérieur des modules CSS.
Retour au projet
Créons un module CSS appelé home.module.css à l'intérieur du dossier app/ui et collons les règles CSS suivantes :
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
Nous devons importer le fichier home.module.css dans le fichier app/page.tsx puis appliquer la classe styles.circle à l'élément div que nous avons créé précédemment.
En Pratique
Merci pour vos commentaires !
