Working with CSS Modules
CSS Modules automatically create unique class names, allowing CSS scoping to a specific component and eliminating style collisions. Simple CSS rules can be written inside the CSS Modules.
Back to the Project
Let's create a CSS module called home.module.css
inside of the app/ui
folder and paste the following CSS rules:
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
We should import the home.module.css
file into the app/page.tsx
file and then apply the styles.circle
class to the div
element we created earlier.
In Practice
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
How do I create and import a CSS module in my Next.js project?
Can you explain how to apply the imported CSS module class to a React component?
What should I do if the styles from the CSS module are not being applied?
Awesome!
Completion rate improved to 2.08
Working with CSS Modules
Свайпніть щоб показати меню
CSS Modules automatically create unique class names, allowing CSS scoping to a specific component and eliminating style collisions. Simple CSS rules can be written inside the CSS Modules.
Back to the Project
Let's create a CSS module called home.module.css
inside of the app/ui
folder and paste the following CSS rules:
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: rgb(255 255 255);
border-radius: 9999px;
}
We should import the home.module.css
file into the app/page.tsx
file and then apply the styles.circle
class to the div
element we created earlier.
In Practice
Дякуємо за ваш відгук!