为什么CSS样式到js文件没有导入？

/导航栏. 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;

===========================================
/导航栏. 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;
    }
}

============================================
/主页. 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;

}

我正在用Reactjs写代码。我的网页有两个组件，分别是Navbar.js和Home.js。当我试图在home.scss中创建class. show-image时，我的导航栏在网页中隐藏起来，当我删除它时，导航栏又出现了。请前辈帮帮我。

react中的DOM在首次呈现组件时未完全加载，因此您无法使用document.querySelectorAll，而是使用名为“useRef”的Hook。修复后的代码：

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;

为什么CSS样式到js文件没有导入？

1条答案

相关问题

热门标签

最新问答