Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Werken met CSS-Modules | Een Next.js-Project Opzetten
Next.js 14-Beheersing voor het Bouwen van Moderne Webapps

bookWerken met CSS-Modules

CSS-modules genereren automatisch unieke classnamen, waardoor CSS beperkt blijft tot een specifiek component en stijlconflicten worden voorkomen. Eenvoudige CSS-regels kunnen binnen de CSS-modules worden geschreven.

Terug naar het project

Maak een CSS-module genaamd home.module.css aan in de map app/ui en plak de volgende CSS-regels:

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

Importeer het bestand home.module.css in het bestand app/page.tsx en pas vervolgens de klasse styles.circle toe op het div-element dat eerder is aangemaakt.

In de praktijk

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.08

bookWerken met CSS-Modules

Veeg om het menu te tonen

CSS-modules genereren automatisch unieke classnamen, waardoor CSS beperkt blijft tot een specifiek component en stijlconflicten worden voorkomen. Eenvoudige CSS-regels kunnen binnen de CSS-modules worden geschreven.

Terug naar het project

Maak een CSS-module genaamd home.module.css aan in de map app/ui en plak de volgende CSS-regels:

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

Importeer het bestand home.module.css in het bestand app/page.tsx en pas vervolgens de klasse styles.circle toe op het div-element dat eerder is aangemaakt.

In de praktijk

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 6
some-alt