Recently, I initiated a new Next.js 13 application,
Within this project, there exists a file named main.modules.scss
.heading {
font-size: 4rem;
color: #000;
}
.dark .heading {
color: #fff;
}
My intention is to utilize this file for styling a specific component as demonstrated below
import styles from "@/styles/main.module.scss";
export default function Home() {
return (
<>
<Header />
<h1 className={styles["heading"]}>Hi! I was styled by scss</h1>
</>
);
}
Upon implementation, it has come to my notice that the styles defined within the .heading class are being correctly applied. However, the properties specified under .dark .heading seem to be ineffective.
It should be noted that my theme provider automatically assigns a .dark class to the HTML element.
An alternative approach involved utilizing a regular .scss file and assigning a class like so
<h1 className="heading">Hi! I was styled by scss</h1>
Remarkably, this method yielded the desired outcome without any issues