Media query not working with CSS modules in React

Question

I was learning CSS modules in React and faced the confusion on why media query is not working. Here is the code:

Header.module.css file

 .nav {
      list-style: none;
      display: flex;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
    }

    .link {
      margin-left: 20px;
    }

    .navContainer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .header {
      background-color: red;
    }

    @media (max-width: 768px) {
      .nav-container {
        color: red;
      }
    }

Header.js file:

import React from "react"; 
import styles from "./Header.module.css"; 
const header = ({ home, about, contact }) => {   return (
    <div className="row">
      <div className="col-md-4">
        <i className="fa fa-3x fa-github"></i>
      </div>
      <div className={`col-md-8 ${styles.navContainer}`}>
        <nav>
          <ul className={styles.nav}>
            <li className={styles.link}>{home}</li>
            <li className={styles.link}>{about}</li>
            <li className={styles.link}>{contact}</li>
          </ul>
        </nav>
      </div>
    </div>   ); };

export default header;

Can you make it minimal reproducible project in codesandbox? — Raja Sekar
– Raja Sekar, Commented Sep 10, 2019 at 9:35
looks like spelling .navContainer should be use instead of .nav-container — Darpan Rangari
– Darpan Rangari, Commented Sep 10, 2019 at 9:51

Mohamed Ramrami · Accepted Answer · 2019-09-10 09:44:16Z

24

It should be .navContainer

@media (max-width: 768px) {
  .navContainer {
    color: red;
  }
}

answered Sep 10, 2019 at 9:44

Mohamed Ramrami

12.8k4 gold badges41 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Media query not working with CSS modules in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related