React中使用Radium实现响应式导航媒体查询样式失效问题排查

我帮你排查了代码里的问题，导致小屏幕下媒体查询样式不生效的原因主要有这几个：

1. Props 接收方式错误 #

你的 Nav 组件定义写成了 function Nav(open)，这里的 open 其实是整个 props 对象，不是你从父组件传递过来的 open 状态属性。正确的写法应该用解构赋值提取目标属性：

// 错误写法
function Nav(open) { ... }

// 正确写法
function Nav({ open }) { ... }

2. 转义引号导致语法错误 #

你在 StyleCompleted 对象里用了 HTML 转义字符 "，这在 JavaScript 对象里是无效语法，会导致 Radium 无法正确解析样式：

// 错误写法
left: open.open ? "0" : "-100%" ,

// 正确写法（用单引号或双引号都可以）
left: open ? "0" : "-100%",

3. 补充：样式优先级与初始状态确认 #

虽然不是直接问题，但可以额外确认：CSS 文件里的 nav { width: 15% } 会被小屏幕下 Radium 内联样式的 width: 100% 覆盖（内联样式优先级更高），这符合你的需求。

修改后的完整 Nav.js 代码 #

import React from 'react';
import Radium from 'radium';
import './Nav.css';

// 解构接收 open 属性
function Nav({ open }){
 const StyleCompleted = {
  '@media screen and (max-width: 700px)':{
    backgroundColor: 'yellow',
    left: open ? "0" : "-100%", // 修复引号问题
    position: 'fixed',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'center',
    textAlign: 'center',
    height: '90vh',
    transition: 'left 0.3s linear'
  }
 }
 return (
  <nav className="navbar" style={StyleCompleted}>
    <a className="link" href="#"> Link </a>
    <a className="link" href="#"> Link </a>
    <a className="link" href="#"> Link </a>
    <a className="link" href="#"> Link </a>
  </nav>
 )
}
export default Radium(Nav);

修改后测试一下：

• 屏幕宽度大于700px时：导航保持15%宽度的正常显示
• 屏幕宽度小于700px时：默认导航隐藏（left: -100%），点击菜单按钮后，open 状态切换为 true，导航会滑入显示（left: 0）

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