Arbeiten mit CSS-Modulen
CSS-Module generieren automatisch eindeutige Klassennamen, wodurch das CSS 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
Eine CSS-Modul-Datei mit dem Namen 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;
}
Die Datei home.module.css in die Datei app/page.tsx importieren und anschließend die Klasse styles.circle auf das zuvor erstellte div-Element anwenden.
In der Praxis
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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.08Arbeiten mit CSS-Modulen
Swipe um das Menü anzuzeigen
CSS-Module generieren automatisch eindeutige Klassennamen, wodurch das CSS 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
Eine CSS-Modul-Datei mit dem Namen 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;
}
Die Datei home.module.css in die Datei app/page.tsx importieren und anschließend die Klasse styles.circle auf das zuvor erstellte div-Element anwenden.
In der Praxis
Danke für Ihr Feedback!
