CSS-Module erstellen automatisch eindeutige Klassennamen, wodurch das CSS-Scoping auf eine bestimmte Komponente beschränkt wird und Stilkonflikte vermieden werden. Einfache CSS-Regeln können innerhalb der CSS-Module geschrieben werden.

Zurück zum Projekt

Lassen Sie uns ein CSS-Modul namens home.module.css im Ordner app/ui erstellen und die folgenden CSS-Regeln einfügen:

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}

Wir sollten die Datei home.module.css in die Datei app/page.tsx importieren und dann die Klasse styles.circle auf das div-Element anwenden, das wir zuvor erstellt haben.

In der Praxis