媒体查询不适用于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文件：

  

从“ react”导入React；从“ ./Header.module.css”导入样式；   const header =（{{home，about，contact}）=> {return（                                                                                    {家}               {关于}               {联系}                                           ）; };

     

导出默认标题；

Answer 1

应为.navContainer

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