Why Css styles to js file without import?

Question

/ Navbar.js /

import './navbar.scss';
import {FaBars, FaSearch} from "react-icons/fa";
import { useState } from 'react';

function Navbar(){
    const [hide,sethide] = useState(true);
    const barIcon = document.querySelectorAll(".link-hide");
    const showIcon = () => {    
        sethide(!hide);
        if(!hide){
            console.log("hello");
            barIcon.forEach(baricon => {
                baricon.style.display = "block";
            })
        }
        else{
            console.log("hi");
            barIcon.forEach(baricon => {
                baricon.style.display = "none";
            })
        }
    }
    return (
        <div className='navbar'>
            <ul className='link-group'>
                <li className='hello'>Home</li>
                <li className='link-hide'>Band</li>
                <li className='link-hide'>Tour</li>
                <li className='link-hide'>Contact</li>
                <li className='link-hide'>More</li>
            </ul>
            <div className='align-icon'>  
                <FaSearch className='search-icon'/>
                <FaBars className='bar-icon' onClick={showIcon}/>
            </div>
            
            
        </div>
    );
}
export default Navbar;

===========================================

/ Navbar.scss /

@import url('https://fonts.googleapis.com/css2?family=Freehand&family=Josefin+Sans:wght@200;300;400&family=Montserrat:wght@200;300;400;600&family=Silkscreen&display=swap');

*{
    padding : 0px; 
    margin : 0px;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color : white;
}
.navbar{
    background : black;
    display: flex !important;
    position: relative;
    grid-template-columns: 50% 50%;
    position: fixed;
    width: 100%;
    ul{
        
        li{
            padding: 20px 25px;
        }
        li:hover{
            background-color: gray  ;
        }
    }
    .align-icon{
        align-self: center;
        position: absolute;
        right: 0px;
        padding: 21px 25px;
    }
    .align-icon:hover{
        
        background-color: gray;
    }
}

@media (max-width: 570px){
    .search-icon{
        display: none;
    }
    .align-icon{
        align-self: flex-start !important;
        
    }
    .bar-icon{
        display: block;
    
    }
    
    .link-group{
        display: block;
        width: 100%;
        
        .link-hide{
            display: none;
        }
        li:nth-child(1){
            display:inline-block;
        }
        
    }

}
@media (min-width: 571px){
    ul{
        display: flex;
    }
    .search-icon{
        display: block;
    }
    .bar-icon{
        display:none;
    }
    .link-hide{
        display: block !important;
    }
}

============================================

/ Home.scss /

@import url('https://fonts.googleapis.com/css2?family=Freehand&family=Josefin+Sans:wght@200;300;400&family=Montserrat:wght@200;300;400;600&family=Silkscreen&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:white;
    font-family: 'Montserrat', sans-serif;

}
.show-image{
    position: relative;
    .pos-absolute{
        width: 100%;
        position: absolute;
        bottom: 10%;
        h1,p{
            display: flex;
            justify-content: center;
        }
    }
}
.head-text{
    font-size: 20px;

}

I am writing code with Reactjs. My webpage has 2 components which are Navbar.js and Home.js. When I try to create the class.show-image in home.scss, my navbar is hidden from the web page, and when I remove it, the navbar reappears. Please help me senior.

Answer 1

The DOM in react is not fully-loaded when the component is first rendered so you can't use document.querySelectorAll, instead use a Hook called "useRef". Code with the fix:

import React, { useRef } from 'react';
import './navbar.scss';
import {FaBars, FaSearch} from "react-icons/fa";
import { useState } from 'react';

function Navbar() {
  const [hide, setHide] = useState(true);
  const linkHideElements = useRef(null);

  const showIcon = () => {
    setHide(!hide);
    if (!hide) {
      linkHideElements.current.forEach(element => {
        element.style.display = 'block';
      });
    } else {
      linkHideElements.current.forEach(element => {
        element.style.display = 'none';
      });
    }
  };

  return (
    <div className="navbar">
      <ul className="link-group">
        <li className="hello">Home</li>
        <li className="link-hide" ref={linkHideElements}>Band</li>
        <li className="link-hide" ref={linkHideElements}>Tour</li>
        <li className="link-hide" ref={linkHideElements}>Contact</li>
        <li className="link-hide" ref={linkHideElements}>More</li>
      </ul>
      <div className="align-icon">
        <FaSearch className="search-icon" />
        <FaBars className="bar-icon" onClick={showIcon} />
      </div>
    </div>
  );
}

export default Navbar;