How do I override global.css in a module css file?

Lets say in my global.css file of a Next.js project I have:

  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

I also have a Layout.js component and a Layout.module.css file. The component looks like this:

import styles from "../styles/Layout.module.css";
const Layout = ({ children }) => {
  return (
    <div>
      <div className="navbar">
        <div className="flex">
        <h1>Structured Safety</h1>
        <nav>
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Demo</a> </li>
            </ul>
        </nav>
        </div>
      </div>
    </div>
  );
};

export default Layout;

and the Layout.module.css is:

/* Navbar */
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  height: 70px;
}

.navbar ul {
  display: flex;
}

.navbar .flex {
  justify-content: space-between;
}

Structured like this, my .navbar .flex does not overwrite the global .flex class and split the h1 from the nav. How can I accomplish overwriting my global style from this component style?

1 thought on “How do I override global.css in a module css file?”

  1. In NextJS and React when you
    import styles from "__.css" the styles becomes a variable so you have to use it in your HTML for it to take effect.

    Currently you’re not using any styles from your Layout.module.css, if you want to use that css you would change your html to: <div className={styles.navbar}> and such..

    Reply

Leave a Comment