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

Question

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

这是我的 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 class。但是，如果我将媒体查询更改为：

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

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

另一个人认为当我将媒体查询更改为这个时确实有效：

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

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

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

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

Answer 1

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

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

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

media query doesn't work properly with css modules when using an arbitrary class name

css

media-queries

reactjs

css-modules