如何解决使用任意类名时,媒体查询无法与CSS模块一起正常使用
我正在做一个反应课程项目,并且我所做的一切都完全按照教程中的说明进行,在某些情况下,媒体查询无法正常工作。
这是我的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和其他形式的样式效果很好,唯一的问题是当我使用媒体查询获取任意类名时。
有人知道如何解决此问题,为什么不起作用?
解决方法
NavigationItems是React组件,因此不适用于样式和className。 className与React组件中的其他任何属性一样都是prop。除非您在自定义组件中对其进行处理,否则它将无法正常工作。
const NavigationItems = (props) => {
const {className} = props
return (<div className={className}>This is your styled item</div>)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。