部署至gh-pages的React导航CSS异常：汉堡菜单与横向导航共存

我是一名新手开发者，现在遇到导航菜单的问题：本地运行时，小屏幕设备上汉堡菜单正常工作——展开时隐藏横向导航链接；但部署到gh-pages后，小屏幕上汉堡菜单和横向导航链接会同时显示。

我的JSX代码 #

import { Link } from 'react-router-dom';
import { useLocation } from "react-router-dom";
import React, { useState } from 'react';
import logo from '../../images/logo.png';
import name from '../../images/name.png';
import "./NavBar.css"

export default function NavBar() {
  const location = useLocation();
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  const closeMenu = () => {
    setMenuOpen(false)
  }

  const activeLinkClass = function(path) {
    if (location.pathname === path) { 
        return 'active-nav-links'
    } 
    else if (location.pathname.slice(0,12) === path ) {
        return 'active-nav-links'
    } 
    else if (location.pathname.slice(0,7) === path) {
        return 'active-nav-links'
    } 
    else {
        return 'nav-links'
    }
};
    return (
      <div className={`nav-container ${menuOpen ? 'menu-open' : 'menu-close'}`}>
        <div className="menu-button" onClick={toggleMenu}>
          <div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
          <div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
          <div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
        </div>
        <div className='nav-links' id="navLogo">
          <Link to="/" onClick={closeMenu}><img src={name} /></Link>
        </div>
        <div className={activeLinkClass('/about')}>
          <Link to="/about" onClick={closeMenu}>about</Link>
        </div>
        {/* <div className={activeLinkClass('/credits')}>
          <Link to="/credits" onClick={closeMenu}>credits</Link>
        </div> */}
        <div className={activeLinkClass('/equipment')}>
          <Link to="/equipment" onClick={closeMenu}>equipment</Link>
        </div>
        <div className={activeLinkClass('/work')}>
          <Link to="/work" onClick={closeMenu}>work</Link>
        </div>
        <div className={activeLinkClass('/contact')}>
          <Link to="/contact" onClick={closeMenu}>contact</Link>
        </div>
      </div>
    );
  }

我的CSS代码 #

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    width: 100%;
    background-color: var(--secondary);
    margin-top: 2%;
    border-bottom: 10px solid var(--primary);
    z-index: 0;
    overflow: hidden;
}

.nav-links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 25px 25px 0 0;
    font-size: small;

    @media (max-width: 1024px) {
        all: revert;
        display: none;
    }
}

.active-nav-links {
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 25px 25px 0 0;

    @media (max-width: 1024px) {
        all: revert;
    }
}

.active-nav-links > a {
    color: var(--secondary);
    font-size: larger;
    
    @media (max-width: 1024px) {
        color: var(--primary);
    }
}

a > img {
    height: 300px;
}

#navLogo {
    @media (max-width: 1024px) {
        height: 200px;
    }
}

a {
    color: var(--primary);
    padding: 0;
    text-decoration: none;
}

a:hover {
    font-size: larger;
}

.menu-button {
    display: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;

    @media (max-width: 1024px) {
        display: block;
    }
}

.menu-bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary);
    margin: 4px 0;
    transition: 0.4s;
    z-index: 100;
  }
  
  .menu-open .menu-bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .menu-open .menu-bar:nth-child(2) {
    opacity: 0;
  }
  
  .menu-open .menu-bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }

  .menu-open .nav-links {
    display: flex;
    flex-direction: column;
  }

  .menu-open {
    z-index: 1;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    background-color:  var(--secondary);
    animation: dropDown .3s ease-in;
  }

  @keyframes dropDown {
    0% {
        height: 10vh;
    }
    100% {
        height: 100%;
    }
  }

  .menu-open > .active-nav-links {
    background-color: var(--primary);
    border-radius: 5px;
    width: 100%;
    font-size: 10px;
  }

  .menu-open > .active-nav-links > a {
    color: var(--secondary);
    font-size: medium;
  }

  .menu-open > div > a:hover {
    text-decoration: underline;
    font-size: medium;
  }

  .menu-open > div:nth-child(3),
  .menu-open > div:nth-child(4),
  .menu-open > div:nth-child(5),
  .menu-open > div:nth-child(6) {
    padding: 40px;
  }

参考截图 #

• 本地版本：
• 部署版本：
• 样式检查截图：

我已经尝试过重构CSS并检查页面应用的样式，但仍未找到问题所在。

问题解决思路 #

核心问题出在CSS媒体查询里的all: revert属性，以及active-nav-links在小屏幕下的隐藏逻辑缺失：

1. 移除all: revert，明确控制显示状态
   all: revert会重置元素的所有样式到浏览器默认值，这会覆盖你后续设置的display: none，导致小屏幕下active-nav-links类的元素依然显示。修改如下：

.nav-links {
    /* 原有样式不变 */
    @media (max-width: 1024px) {
        /* 去掉all: revert */
        display: none;
    }
}

.active-nav-links {
    /* 原有样式不变 */
    @media (max-width: 1024px) {
        /* 去掉all: revert，默认隐藏 */
        display: none;
    }
}

2. 强化菜单展开时的样式优先级
   确保菜单展开时，所有导航元素都能正确显示：

.menu-open .nav-links,
.menu-open .active-nav-links {
    display: flex;
    flex-direction: column;
}

3. 检查部署缓存
   gh-pages可能会缓存旧的CSS文件，部署后按Ctrl+F5强制刷新页面，确认是否是缓存导致的样式未更新。

4. 补充menu-close类的样式
   给menu-close类添加小屏幕下的隐藏逻辑，确保非展开状态下导航元素隐藏：

@media (max-width: 1024px) {
    .menu-close .nav-links,
    .menu-close .active-nav-links {
        display: none;
    }
}

按上述修改后，重新部署到gh-pages，小屏幕下的导航应该能恢复和本地一致的表现。

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