Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Utilisation des Modules CSS | Configuration d’un Projet Next.js
Maîtrise de Next.js 14 pour la Création d'Applications Web Modernes

bookUtilisation 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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

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

bookUtilisation 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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6
some-alt