当先锋百科网

首页 1 2 3 4 5 6 7

CSS无法在Reactjs上加载更正的问题

我按照Reactjs上的这个教程来建立一个网站。但是，我的navbar的以下css文件加载不正确。

这是我的App.js文件。

import './App.css';
import Navbar from "./components/Navbar"
import Home from './pages/Home'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'


function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />}>

          </Route>
        </Routes>
      </Router>
    </div >
  );
}

export default App;

这是Navbar.css文件:

.navbar {
    width: 100%;
    height: 100px;
    background-color: #121619;
    display: flex;
    flex-direction: row;
}

.navbar .leftSide {
    flex: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 150px;
}

.navbar .leftSide img {
    width: 70px;
}

.navbar .rightSide {
    flex: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 20px;
}

.navbar .rightSide button {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
}

.navbar .rightSide svg {
    font-size: 40px;
}

.navbar #open {
    padding-left: 0px;
}

.navbar #open img {
    display: none;
}

.navbar #close img {
    display: inherit;
}

.navbar #open .hiddenLinks {
    display: inherit;
    margin-left: 30px;
}

.navbar #close .hiddenLinks {
    display: none;
}

.navbar #open a {
    width: 70px;
    margin: 5px;
}

@media only screen and (max-width: 900px) {
    .navbar .rightSide a {
        width: 70px;
    }

    .navbar .leftSide {
        padding-left: 50px;
    }
}

@media only screen and (max-width: 600px) {
    .navbar .rightSide a {
        display: none;
    }

    .navbar .rightSide {
        justify-content: flex-end;
        padding-right: 50px;
    }

    .navbar .rightSide button {
        display: inherit;
    }
}

@media only screen and (min-width: 600px) {
    .navbar .rightSide button {
        display: none;
    }

    .hiddenLinks {
        display: none;
    }
}

这是我用过的Navbar.js文件。

import React from 'react'
import Logo from '../assets/pizzaLogo.png'
import { Link } from 'react-router-dom'
import '../styles/Navbar.css';

function Navbar() {
    return (
        <div classname="navbar">
            <div classname="leftSide">
                <img src={Logo} />
            </div>
            <div classname="rightSide">
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/about"> About </Link>
                <Link to="/contact"> Contact </Link>
            </div>
        </div>
    );
}

export default Navbar

根据教程，我应该看到这个:enter image description here

但是我看到了这个:enter image description here

如果有帮助的话，我的浏览器是Arc。我也尝试过使用css加载器。我不知道该怎么解决这个问题。