React CSS Modules自定义组件媒体查询失效问题求助

你遇到的问题核心在于自定义组件NavigationItems没有正确接收并应用你传递的className属性。

为什么会这样？ #

CSS Modules确实会给类名添加唯一哈希后缀（比如.Foo会变成类似.Foo_xyz123的形式），但你已经通过styles.Foo正确引用了转换后的类名。问题出在你的NavigationItems组件内部——如果这个组件没有把外部传入的className传递给它的根DOM元素，那么这个类名根本不会出现在页面的DOM结构中，媒体查询自然无法匹配到目标元素。

而.Toolbar和.Toolbar p能正常生效，是因为这些类名直接作用在原生DOM元素（header、p）上，CSS Modules的转换和媒体查询都能正常匹配。

解决方案 #

修改你的NavigationItems组件，确保它将外部传入的className合并到内部根元素的类名中：

// NavigationItems.js
import styles from './NavigationItems.module.css';

const NavigationItems = props => (
  // 把props.className传递给根元素，可与组件自身类名合并
  <div className={`${styles.NavigationItems} ${props.className}`}>
    {/* 组件的其他内容 */}
  </div>
);

export default NavigationItems;

如果你的NavigationItems没有自身的类名，也可以直接使用：

<div className={props.className}>
  {/* 组件内容 */}
</div>

验证方法 #

修改完成后，打开浏览器开发者工具：

1. 找到NavigationItems对应的DOM元素
2. 检查它的class列表，应该能看到带有哈希后缀的Foo类名（比如Foo_abc123）
3. 此时媒体查询中的.Foo（实际转换为.Foo_abc123）就能正确匹配并隐藏该元素了

内容的提问来源于stack exchange，提问作者maryam n