styled-components中媒体查询无法生效，移动端隐藏navLink无响应求助

• 原生React的行内样式不支持媒体查询规则：你直接写在JS样式对象里的@media块无法被浏览器解析，因此在元素检查面板看不到对应的媒体查询规则。
• 类名属性写法错误：React中定义HTML类名需要用className属性，你代码中写的class="navContent"不会生效，这也是你单独编写CSS文件不生效的核心原因之一。
• 媒体查询逻辑和语法错误：你当前写的@media(minWidth:991px)存在两个问题：一是媒体查询属性要使用短横线写法min-width而非驼峰写法；二是min-width规则代表「屏幕宽度≥991px时生效」，和你需要的「移动端（屏幕宽度≤991px）隐藏导航」的逻辑完全相反。

方案1：使用外部CSS文件（最推荐，适配性最好） #

步骤如下：

1. 修正组件中所有类名属性，把class替换为className，给导航列表加上自定义类名：

// 仅展示修改部分代码
<div className="navContent" style={styles.navContent}>
  <ul className="nav-list" style={styles.navList}>
    {/* 原有li内容保持不变 */}
  </ul>
</div>

2. 新建同名CSS文件Header.css，写入对应媒体查询规则：

@media (max-width: 991px) {
  .nav-list {
    display: none !important;
  }
}

3. 在Header组件顶部引入该CSS文件即可生效：

import './Header.css'

方案2：使用CSS-in-JS库（适合全JS写样式的项目） #

可以使用styled-components这类支持媒体查询的样式库，示例如下：

1. 安装依赖：
   npm install styled-components
2. 改写导航列表样式定义：

import styled from 'styled-components'

// 定义带媒体查询的导航列表组件
const NavList = styled.ul`
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  margin-top: 16px;
  /* 移动端隐藏规则 */
  @media (max-width: 991px) {
    display: none;
  }
`

function Header() {
  return (
    {/* 其他代码不变 */}
    <div className="navContent" style={styles.navContent}>
      {/* 替换原来的ul标签为自定义的NavList组件，不用再加style属性 */}
      <NavList>
        {/* 原有li内容保持不变 */}
      </NavList>
    </div>
  )
}

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