gh-pages 反应应用程序 css 部署时显示不正确

问题描述 投票:0回答:1

我是一名新开发人员,正在寻求指导。

我想在较小的屏幕上使用汉堡菜单进行导航,并使用以下 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;
  }

以下是一些图片供参考 -

Local version

Deployed version

我尝试重构我的 CSS 并检查页面以查看正在应用哪些样式,但我不太确定我在看什么。

Screenshot for reference

css reactjs github-pages web-frontend
1个回答
0
投票

你的组件文件和 CSS 看起来都很好,我没有发现任何问题。

我的建议是尝试在本地构建生产版本并在本地运行生产版本,看看代码中是否有问题或者如果

gh-pages
无法正常工作,然后决定采取哪种方法。

以下是如何在本地构建和托管应用程序的生产版本 --

  1. npm build
    这将在
    build/
    目录中创建应用程序的生产版本。
  2. serve -s build
    将使用位于
    build/
    目录中的应用程序启动一个简单的服务器。
  • 如果您没有
    serve
    ,请运行
    npm i -g serve
    ,然后重试。

如果上述所有操作都正常,那么您可以按照本文档的第 7 步仔细检查是否正确使用

gh-pages
https://github.com/gitname/react-gh-pages#7-push -react-app 到 github-repository

如果没有任何效果,我建议提供一个指向您的存储库的链接,以便我们可以进一步帮助您解决您试图克服的挑战。

祝你好运!

© www.soinside.com 2019 - 2024. All rights reserved.