I am creating a website that utilizes the Spotify API and I have created a login page where the user can login through Spotify and if they successfully login they are redirected to my home page. I have CSS for the login that puts the login button in the center of the page and when they get redirected to the homepage I am trying to put the navigation bar on top of the page but for some reason, it takes the CSS of the Login component and ignores all the CSS I try to put in for the navigation bar component and I want to know why that is.

my App.js file:

import React, { useState, useEffect} from 'react';
import { Route, Routes } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Login from './components/Login';
import Home from  './components/Home';
import NavBar from './components/NavBar';
import Guesser from './components/Guesser';
import Feed from './components/Feed';
import Generator from './components/Generator';

const code = new URLSearchParams(window.location.search).get('code')

const App = () => {
  
  return (
    <div className='main-content'>
      <Container>
        {code ? 
          <div>
            <Routes>
                <Route path='/' element={<NavBar />}>
                  <Route index element={<Home />} />
                  <Route path='/guesser' element={<Guesser />} />
                  <Route path='/feed' element={<Feed />} />
                  <Route path='/generator' element={<Generator />} />
                </Route>
            </Routes>
          </div> : 
          <Login />}
      </Container>
    </div>
  )
}

export default App

my App.css file:

.main-content{
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: black;
  color:white;
  padding: 0;
}

My Login.js File:

import React from 'react'
import {Button} from 'react-bootstrap'; 
import "./index.css"
import SpotifyLogo from '../../spotify-logo2.png';

const Login = () => {
    const authEndPoint = "https://accounts.spotify.com/authorize";
    const clientId = "{My client id}";
    const redirectUri = "http://localhost:3000";
    const scopes = [
        "streaming",
        "user-read-email",
        "user-read-private",
        "user-library-read",
        "user-library-modify",
        "user-read-playback-state",
        "user-modify-playback-state"
    ];
    
    const AUTH_URL = `${authEndPoint}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scopes.join(" ")}`;

    return(
        <div className="main-content">
            <div className='spot-img'>
                <img src={SpotifyLogo} alt='Spotify Logo'/>
            </div>
            <Button
                href={AUTH_URL}
                className='button'
            >
                login
            </Button>
        </div>
    )
}

export default Login

My Login.css File:

.main-content{
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: column;
    position: relative;
}

.spot-img{
    position: absolute;
    top: 100px;
}

.button{
    background-color: green;
    width: 100px;
}

My Navbar.js File:

import "./index.css";
import { NavLink, Outlet } from 'react-router-dom';

const NavBar = () => {
    return(
        <div className='main-content'>
                <nav >
                    <NavLink
                        exact='true'
                        activeclassname='active'
                        to='/'
                    >
                        Home
                    </NavLink> |
                    <NavLink
                        exact='true'
                        activeclassname='active'
                        to='/guesser'
                    >
                        Guesser
                    </NavLink> | 
                    <NavLink
                        exact='true'
                        activeclassname='active'
                        to='/feed'
                    >
                        Feed
                    </NavLink> | 
                    <NavLink
                        exact='true'
                        activeclassname='active'
                        to='/Generator'
                    >
                        Generator
                    </NavLink> | 
                </nav> 
                <Outlet />           
        </div>
    )
}

export default NavBar;

My NavBar.css File:

.nagivation{
    position: absolute;
    top: 10px;
    background-color: gray;
}

All the other component file are simple and only output the name of the webpage and have no CSS filed in yet.

Login image

Home page after successfully logging in

CodePudding user response：

The problem is that you are reusing the same CSS for the logo and the navbar. The parent div of both the logo and the navbar uses the .main-content which centers everything

.main-content{
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: column;
    position: relative;
}

I suggest you use different styling for the parent div of your navbar.