React+React-Bootstrap导航栏自定义失效问题求助

我用React-JS开发NFT铸造网站，包含Home、About、Mint、Gallery四个页面，通过react-bootstrap实现导航栏，路由跳转功能正常，但导航栏未呈现预期的自定义样式（理想状态下需具备自定义背景色、组件间距等效果）。相关代码如下：

导航栏组件（NavBar.js） #

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {Link} from "react-router-dom";
import '/Users/macbook/new-site/src/App.css';


const NavBar = ({}) => {
    return (
      <Navbar expand='lg' bg="secondary" variant='dark'>
        <Container>
          <Navbar.Brand href="#home"></Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link as={Link} to='/home' >Home</Nav.Link>
              <Nav.Link as={Link} to="/about">About</Nav.Link>
              <Nav.Link as={Link} to="/gallery">Gallery</Nav.Link>
              <Nav.Link as={Link} to="/mint">Mint</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    );
};

export default NavBar;

路由配置（App.js） #

import { Routes, Route, BrowserRouter } from 'react-router-dom';
import '/Users/macbook/new-site/src/App.css';
import NavBar from './components/NavBar';
import Home from './pages/home';
import About from './pages/about';
import Gallery from './pages/gallery';
import Mint from './pages/mint';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <>
        <NavBar className='NavBar'/>
        </>
      
        <Routes>
          <Route index element={<Home/>} />
          <Route path='/home' element={<Home />}/>
          <Route path='/about' element={<About />}/>
          <Route path = '/gallery' element={<Gallery />} />
          <Route path='/mint' element={<Mint />} />
        </Routes>
     
        </div>
      {/*<div className='moving-background'></div>*/}
    </BrowserRouter>  
  );
}

export default App;

package.json #

{
  "name": "new-site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@chakra-ui/react": "^2.8.1"
  }
}

App.css #

@import url("https://fonts.googlesapi.com/css?family=Press+Start+2P");
@import url("https://fonts.googlesapi.com/css?family=VT323");

.App {
  text-align: center;
  font-family: "Press Start 2P", "VT323";
  color: black;
}

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.overlay {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

.moving-background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/parallax-bg.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 40% 40%;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

导航栏样式自定义建议 #

1. 修复字体引入错误

CSS中Google Fonts的URL存在拼写错误，需将fonts.googlesapi.com改为fonts.googleapis.com，否则无法加载指定字体：

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
@import url("https://fonts.googleapis.com/css?family=VT323");

2. 自定义导航栏基础样式

给Navbar组件添加专属类名，通过CSS覆盖react-bootstrap默认样式：

• 先修改NavBar.js中的组件：

<Navbar expand='lg' bg="secondary" variant='dark' className="custom-navbar">

• 再在App.css中添加样式：

.custom-navbar {
  /* 替换默认secondary背景色 */
  background-color: #1a1a2e !important;
  /* 增加上下内边距，拉开与其他组件的间距 */
  padding: 1rem 0;
  /* 添加阴影增强层次感 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

3. 调整导航链接间距与样式

优化导航链接的间距、颜色和交互效果：

.custom-navbar .nav-link {
  /* 增加左右内边距，拉开链接间距 */
  padding: 0.5rem 1.5rem;
  /* 自定义字体大小 */
  font-size: 1rem;
  /* 未激活状态颜色 */
  color: #e0e0e0 !important;
  text-decoration: none;
}

.custom-navbar .nav-link:hover {
  /* 鼠标悬停状态颜色 */
  color: #ffd700 !important;
}

.custom-navbar .nav-link.active {
  /* 当前激活页面的链接样式 */
  color: #ff6b6b !important;
  font-weight: bold;
}

4. 优化品牌与容器样式

如果需要调整品牌区域或容器宽度：

.custom-navbar .navbar-brand {
  /* 自定义品牌文字样式，可添加logo */
  font-size: 1.5rem;
  color: #ffd700 !important;
}

.custom-navbar .container {
  /* 自定义容器最大宽度 */
  max-width: 1200px;
}

5. 响应式适配调整

针对移动端折叠导航栏优化样式：

@media (max-width: 991px) {
  .custom-navbar .nav-link {
    /* 移动端链接上下间距 */
    padding: 0.8rem 0;
    text-align: left;
  }
}

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