How to override global CSS in a CSS module file?

Question

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={styles.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?

juliomalves · Accepted Answer · 2022-09-18 21:23:43Z

22

Since .flex refers to a global class you'll need to use the :global selector to target it in your CSS module.

/* Layout.module.css */

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

Or using an alternate syntax.

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

edited Sep 18, 2022 at 21:23

answered Feb 19, 2021 at 0:46

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

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

Comments

prograk · Accepted Answer · 2022-01-28 15:18:21Z

0

/** CSS MODULE FILE **/

.classname :global(.globalClass) { css properties }

.classname {
 :global {
  .globalClass { css properties }
 }
}

answered Jan 28, 2022 at 15:18

prograk

5714 silver badges15 bronze badges

Comments

jakey_dev · Accepted Answer · 2021-02-16 01:39:32Z

-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..

answered Feb 16, 2021 at 1:39

jakey_dev

2334 silver badges12 bronze badges

2 Comments

Kiran Over a year ago

Or you can just do import "../styles/Layout.module.css";

Tim B. Over a year ago

Sorry, I have edited my question to fix my typo. I am using the styles.navbar on the outer div. So I would think that the .navbar .flex selector would correctly select here and change justify-content to space between but that does not happen.

Collectives™ on Stack Overflow

How to override global CSS in a CSS module file?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related