Create React App使用SCSS时屏幕宽度媒体查询异常致导航栏始终隐藏

问题根因 #

• Sass嵌套写法错误，你将.nbd的显示规则嵌套在li a下，编译后生成的选择器为li a .nbd，仅能匹配li a内部的子元素，若.nbd类是直接加在导航容器/导航项上，完全无法命中规则，导航会一直隐藏。
• 样式优先级顺序错误，全局.nbd {visibility: hidden}写在媒体查询规则之后，CSS后定义的规则优先级更高，即便选择器写对，媒体查询的显式规则也会被覆盖，导致媒体查询失效。
• li a的基础样式全部定义在媒体查询内部，小屏状态下li a无基础样式，会出现样式异常。

修复方案 #

替换App.scss内容为如下代码即可：

@import "_var.scss";

.logo {
  width: 100px;
  height: 100px;
  padding-left: 10%;
  padding-bottom: 0px;
}

body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: $mainWhite;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  text-align: center;
  display: flex
}

li {
  float: left;
}

// 小屏默认规则：导航隐藏
.nbd {
  visibility: hidden;
}

li a {
  border-style: solid;
  border-radius: 5%;
  margin: 2px;
  margin-bottom: 0px;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 10px;
  text-decoration: none;
}

// 宽屏规则：覆盖小屏隐藏逻辑，导航显示
@media screen and (min-width: 480px) {
  .nbd {
    visibility: visible;
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

li a:hover {
  background-color: $mainWhite;
}

.active {
  background-color: $mainWhite;
}

.title {
  font-size: 40px;
  background-color: $mainBlack;
  margin: 6px 0;
  margin-bottom: 0;
  padding: 20px;
  color: $mainWhite;
}

.f {
  display: flex;
  overflow-x: hidden;
  flex-wrap: wrap;
}

.img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 5px;
}
/*Images*/
.imgSize1 {
  height: 50px;
  width: 50px;
}

.imgSize2 {
  height: 75px;
  width: 75px;
}

.imgSize3 {
  height: 125px;
  width: 125px;
}
/*Images*/

.grey {
  background-color: lighten($mainBlack, 15%);
}

如果你的.nbd类是绑定在其他外层导航容器上，调整对应选择器匹配实际DOM结构即可。

内容的提问来源于stack exchange，提问作者M. Yusuf Suleman