小编mar*_*m n的帖子

我正在做一个反应课程项目，我正在按照教程所说的方式做所有事情，并且媒体查询在某些情况下不起作用。

这是我的 js 文件的简短版本（其中 NavigationItems 是我的自定义元素）

import styles from './Toolbar.module.css';

const toolbar = props => (
  <header className={styles.Toolbar}>
    <NavigationItems className={styles.Foo} />
    <p>some text</p>
  </header>
);

我希望在使用移动设备时不显示我的 NavigationItems，因此包含我的样式的 css 文件包含此媒体查询：

@media (max-width: 499px){
    .Foo {
        display: none;
    }
}

令人惊讶的是它不起作用并且不应用 Foo 类。但是，如果我将媒体查询更改为：

@media (max-width: 499px){
    .Toolbar{
        display: none;
    }
}

它确实有效，当宽度小于 500px 时，工具栏会消失。但我不想要这个；我希望工具栏在那里，而导航项消失。

另一位认为确实有效的是当我将媒体查询更改为：

@media (max-width: 499px){
    .Toolbar p{
        display: none;
    }
}

并且js文件中包含“一些文本”的段落在应该消失的时候消失了。但同样的事情仍然不适用于 NavigationItems（我猜测是因为它不是默认的 HTML 标签）。

当我使用CSS模块时，我使用react-scripts@3.4.3和其他形式的样式工作得很好，唯一的问题是当我对任意类名使用媒体查询时。

有谁知道如何解决这个问题以及为什么这不起作用？