NextJS CSS module not working / weird behaviour(?)

Question

total amateur here – please be kind :)

I am currently experimenting a little bit with NextJS and set up a project some while ago. I used CSS modules here and there and a week ago, everything worked just fine. Just now I re-opened my projected to learn that my CSS modules partially do not work anymore.

Part of the "affected" file structure:

components
├── styles
|   └─Navbar.module.css
|   └─CustomList.module.css
└── Navbar.js

Now, to make it simple, I tried the following very small thing in Navbar.js:

import styles from "./styles/Navbar.module.css";
<div className={styles.test}>
    {children}
</div>

When I import Navbar.module.css the following CSS will have no effect and neither class nor css is applied to the HTML (also checked in the Browser's inspect window). As soon as I replace Navbar with CustomList: CustomList.module.css everything works again as expected.

.test {
    background-color: red;
}

Does anyone have an explanation for this behaviour? (please!)

Aditya Singh · Accepted Answer · 2022-09-15 13:28:57Z

1

Try this

import styles from "./styles/Navbar.module.css";
<div className="test">
    {children}
</div>

answered Sep 15, 2022 at 13:28

Aditya Singh

1213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS CSS module not working / weird behaviour(?)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related