css - 使用任意类名时，媒体查询无法与 css 模块一起正常工作

Question

我正在做一个 react 类(class)元素，我正在按照教程所说的做所有事情，并且在某些情况下媒体查询不起作用。
这是我的 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 时工具栏消失。但我不想要这个；我希望工具栏在那里，而只有 NavigationItems 消失。
另一种认为确实有效的是当我将媒体查询更改为:

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

并且在 js 文件中包含“一些文本”的段落应该会消失。但是，同样的事情对 NavigationItems 不起作用(我猜是因为它不是默认的 HTML 标签)。
当我使用 CSS 模块时，我使用的是 react-scripts@3.4.3 和其他形式的样式工作得非常好，唯一的问题是当我对任意类名使用媒体查询时。
有谁知道如何解决这个问题以及为什么这不起作用？

Answer 1

NavigationItems 是 React 组件，因此不适用于样式和类名。
className 与 React 组件中的任何其他组件一样是 prop。除非您在自定义组件中处理它，否则它将无法工作。

const NavigationItems = (props) => {
  const {className} = props
  return (<div className={className}>This is your styled item</div>)
}