Issue with styles not being applied when using .modules. In Next.js

Question

I launched a Next.js 13 application,

I have a main.modules.css file

< ;/code>

.heading {
    font-size: 4rem;
    color: #000;
}

.dark .heading {
    color: #fff;
}

I use it to style components like this

import styles from "@/styles/main.module.scss";

export default function Home() {
    return (
        <>
            <Header />
            <h1 className={styles["heading"]}>Hi! I was styled by scss</h1>
        </>
    );
}

From. The styles for the heading class are applied correctly, but from. The attribute dark .heading does not have.

My theme provider does add one to the HTML element. dark category.

I used a normal one. scss file and apply a class like this

<h1 className="heading">Hi! I was styled by scss</h1>

Then it worked fine

Answer 1

You can try using styles. title. < h1 className = {styles.heading} >Hello! My style is scss</h1>

Answer 2

You can use :global to declare that you are using a global class

So main. modules. scss will become

.heading {
    font-size: 4rem;
    color: #000;
}

:global(.dark) .heading {
    color: #fff;
}

Why is this happening?

Why is this happening?
The scope of CSS modules is the components they use.

This means by default. The dark selector will be compiled and will not reference the global one. dark category.