Next.js Discord

Discord Forum

CSS modules not being applied

Answered
filyys posted this in #help-forum
Open in Discord
Avatar
filyysOP
Hi, I'm new to Next.js and React, I have this problem where my css styles are being crossed out and not displayed. Any way to fix this?

import styles from "./Page.module.css";

export default async function Home() {
  return (
    <main className={styles.pageeee}>
      <nav className={styles.navbarContainer}>
      </nav>
    </main>
  );
}

.pageeee {
    width: "100%";
    height: "100vh";

    position: "relative";
    background-color: "blue";
}
Image
Answered by Velvet ant
it seems that you pass wrong value in your css file. css module is just css

.pageeee {
    width: 100%;
    height: 100vh;

    position: relative;
    background-color: blue;
}
View full answer

2 Replies

Avatar
Velvet ant
it seems that you pass wrong value in your css file. css module is just css

.pageeee {
    width: 100%;
    height: 100vh;

    position: relative;
    background-color: blue;
}
Answer
Avatar
filyysOP
Omg that's actually really embarrassing, thanks for the reply. Too much style={{ }} lately 🫠