Styled Components媒体查询失效求助：移动端导航链接无法隐藏

你的问题核心是传递给mobile函数的对象没有被正确解析为CSS规则，导致媒体查询块里生成了无效的[object Object]内容，而非预期的display: none;。

修复步骤： #

1. 修改responsive.js中的媒体查询函数
   原代码中直接插入对象会被转换为字符串[object Object]，需要用css函数包裹传入的props，确保对象被正确解析为CSS声明：

import { css } from "styled-components";

export const mobile = (props) => {
  return css`
    @media only screen and (max-width: 375px) {
      ${css(props)}
    }
  `;
};

2. 验证生效情况
   修改后打开浏览器开发者工具，查看LinkNav元素的样式，检查媒体查询部分是否正确生成了：

   @media only screen and (max-width: 375px) {
     display: none;
   }
   

其他排查点： #

• 确认responsive.js的导入路径正确，没有拼写错误
• 检查浏览器窗口宽度确实小于375px（可以手动调整窗口大小或使用开发者工具的设备模拟器）

内容的提问来源于stack exchange，提问作者Rami Ben Taieb