Question

我正在做一个反应课程项目，并且我所做的一切都完全按照教程中的说明进行，在某些情况下，媒体查询无法正常工作。

这是我的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。 className与React组件中的其他任何属性一样都是prop。除非您在自定义组件中对其进行处理，否则它将无法正常工作。

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

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

1 个答案: