React+SCSS开发中部分元素样式与媒体查询不生效求助

问题1：header嵌套nav中h4/li的color属性无效果 #

原因 #

React Router的NavLink组件自带默认样式（包括激活态样式），其优先级高于你为父元素h4/li设置的color属性，导致你的样式被覆盖。开发者工具中能看到样式但页面无变化，就是因为被更高优先级的NavLink样式压制了。

解决方案 #

直接针对NavLink元素设置样式，或者给NavLink绑定自定义类名：

1. 直接选中NavLink设置样式：

header nav h4 .nav-link {
  color: gold;
}
header nav ul li .nav-link {
  color: white;
}

2. 给NavLink添加自定义类名（推荐，更易维护）：
   React代码修改：

<h4 className="color">
  <NavLink className="site-logo" to='/'>Chidera</NavLink>
</h4>
<ul className="nav-links">
  <li><NavLink className="nav-item" to='/'> Home</NavLink></li>
  <li><NavLink className="nav-item" to='portfolio'> Portfolio</NavLink></li>
</ul>

SCSS对应样式：

.site-logo {
  color: gold;
}
.nav-item {
  color: white;
}

注意：React中元素类名需用className而非class，你的代码里ul和div用了class，虽然部分环境兼容，但建议修正为规范写法。

问题2：媒体查询中burger元素display:block不生效 #

原因 #

你原本的SCSS嵌套生成的选择器是header nav .burger，其优先级（特异性）高于媒体查询中单独的.burger选择器，导致媒体查询的样式被原样式覆盖。

解决方案 #

提高媒体查询中选择器的优先级，与原样式保持一致：

@media screen and (max-width: 768px) {
    main {
        background-color: pink;
    }
    header nav .burger {
        display: block;
    }
}

不推荐用!important强制生效，会增加后续样式维护的复杂度。

通用排查技巧 #

• 打开浏览器开发者工具（F12），选中目标元素，查看Styles面板：若你的样式被划掉，说明优先级不足或被其他样式覆盖；
• 检查React组件的类名拼写是否正确，确保className属性使用规范；
• 针对第三方组件（如NavLink）的样式，直接作用于组件本身或其生成的DOM元素，避免仅设置父元素样式。

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