javascript - 媒体查询不适用于 React 中的 CSS 模块

Question

我正在学习 React 中的 CSS 模块，并且对为什么媒体查询不起作用感到困惑。这是代码：

Header.module.css 文件

 .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 文件：

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;

标签： javascriptreactjs

Answer 1

它应该是.navContainer

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