媒体查询样式仅部分生效：移动端导航Flex样式失效求助

问题描述 #

制作移动端导航时，媒体查询中的背景颜色样式生效，但display:flex与flex-direction:column样式未生效。期望实现移动端导航100%宽度、100vh高度的垂直flex布局。

JSX代码 #

import classes from "./Header.module.scss";
import { NavLink } from "react-router-dom";
import { FaBars } from "react-icons/fa";
import { IoMdClose } from "react-icons/io";

const Header = () => {
  const smoothScrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({
        behavior: "smooth",
      });
    }
  };

  return (
    <header className={classes.header}>
      <nav className={`${classes.nav} container`}>
        <ul>
          <li>
            <NavLink to="/" className={classes.logo}>
              Quibeez
            </NavLink>
          </li>
        </ul>
        <ul className={classes['nav-link']}>
          <li>
            <NavLink className={classes.link} to="/">
              Home
            </NavLink>
          </li>
          <li>
            <a
              href="#about"
              className={classes.link}
              onClick={() => smoothScrollToSection("about")}
            >
              About
            </a>
          </li>
          <li>
            <a
              href="#contact"
              className={classes.link}
              onClick={() => smoothScrollToSection("contact")}
            >
              Contact
            </a>
          </li>
          <li>
            <a
              href="#menu"
              className={classes["menu-link"]}
              onClick={() => smoothScrollToSection("menu")}
            >
              Menu
            </a>
          </li>
        </ul>
        <ul>
          <li className={classes["mobile"]}>
            <button>
              <FaBars className={classes["btn-menu-open"]} />
            </button>
            <button>
              <IoMdClose className={classes["btn-menu-close"]} />
            </button>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

SCSS代码 #

@import "../styles/mixins/mixins.scss";
@import "../styles/variables/variables.scss";

.header {
  background-color: $orange;
  padding: 2.3rem;

  .nav {
    @include flex(space-between, center);

    ul {
      @include flex(center, center, row, 4.6rem);
      list-style: none;
      font-family: Poppins;

      li {
        cursor: pointer;
      }
    }

    .link {
      font-size: 1.6rem;
      text-decoration: none;
      color: $black-secondary;
    }

    .menu-link {
      color: $orange;
      font-size: 1.6rem;
      font-weight: 700;
      background-color: $white-primary;
      padding: 3px 16px 5px 16px;
      text-decoration: none;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      border-radius: 1.6rem;
    }

    .logo {
      color: $white-secondary;
      font-size: 2.8rem;
      font-family: Lily Script One;
    }
  }

  .mobile {
    @include flex(center center);
    display: none;

    button {
      border: none;
      background: none;
      cursor: pointer;
      @include flex(center center);
    }

    .btn-menu-open,
    .btn-menu-close {
      width: 2.4rem;
      height: 2.4rem;
    }

    .btn-menu-close {
      display: none;
    }
  }
}

@media (max-width: 60em) {
  .nav {
    .nav-link { 
      display: flex;
      flex-direction: column;
      background-color: blue;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      
    }

  }
}

问题原因 #

1. 选择器优先级不足：媒体查询中的.nav .nav-link选择器，优先级低于.header .nav ul（原有样式中通过嵌套给ul设置了flex混合宏），导致flex相关样式被覆盖。
2. 混合宏样式冲突：原有@include flex(center, center, row, 4.6rem)已经设置了flex-direction:row，媒体查询中的flex-direction:column未成功覆盖。

修复方案 #

1. 提升选择器优先级 #

修改媒体查询中的选择器，确保其优先级高于原有样式：

@media (max-width: 60em) {
  .header .nav .nav-link { 
    display: flex;
    flex-direction: column;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0; /* 重置ul默认边距 */
    padding: 2rem; /* 避免内容贴边 */
    box-sizing: border-box; /* 确保宽度包含内边距 */
  }
  /* 显示移动端按钮 */
  .header .mobile {
    display: flex;
  }
}

2. 添加菜单显隐逻辑（补充功能） #

当前代码未绑定按钮点击事件，需添加React状态控制菜单显示/隐藏：

import { useState } from 'react'; // 引入useState

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const smoothScrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setIsMenuOpen(false); // 点击链接后关闭菜单
    }
  };

  return (
    <header className={classes.header}>
      <nav className={`${classes.nav} container`}>
        {/* ...其他代码不变 */}
        <ul className={`${classes['nav-link']} ${isMenuOpen ? classes.active : ''}`}>
          {/* ...导航链接不变 */}
        </ul>
        <ul>
          <li className={classes["mobile"]}>
            <button onClick={() => setIsMenuOpen(true)}>
              <FaBars className={classes["btn-menu-open"]} />
            </button>
            <button onClick={() => setIsMenuOpen(false)}>
              <IoMdClose className={classes["btn-menu-close"]} />
            </button>
          </li>
        </ul>
      </nav>
    </header>
  );
};

对应SCSS补充：

@media (max-width: 60em) {
  .header .nav .nav-link {
    display: none; /* 移动端默认隐藏 */
    /* ...其他样式不变 */
  }
  .header .nav .nav-link.active {
    display: flex; /* 激活时显示 */
  }
}

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