我的 CSS 在 vs 代碼中無法正常工作

Question

我寫了一個簡單的導航欄，它有一個滾動動畫。 例子：

<div className={"nav active"}>

這里的 CSS on active不起作用。 即使我在我的 CSS 文件中寫了.active或nav.active ，我也沒有結果。 在我的代碼中，我使用了on scroll事件偵聽器，因此當我向下滾動時，導航欄顯示為黑色，當我繼續導航欄時，它會消失。 但問題是 CSS 在nav工作，但在active不起作用，因此沒有出現active黑色。

    const  [show , handleshow]= useState(false);

    const transitionNavBar = () => {
        if (window.scroll > 100){
            handleshow(true);
        }else{
            handleshow(false);
        }
    };
     useEffect(() => {
        window.addEventListener("scroll",transitionNavBar);
        return () => window.removeEventListener("scroll", transitionNavBar);
     }, []);
    return (
        <div className={`nav ${show && "active"}`}>
            <div className="nav_contents">
            <img className='nav_logo'
        src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" 
      alt=""
        />
        <img className='nav_avatar' src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
         alt=""
         />
            </div>
        </div>
    )
}



.nav{
    position: fixed;
    top: 0;
    padding: 20px;
    width: 100%;
    height: 30px;
    z-index: 1;
}

    .nav.active{
        background-color: #111;
    }
    
    
    .nav_contents{
        display: flex;
        justify-content: space-between;
    }
    
    .nav_logo{
        position: fixed;
        top: 10px;
        left: 0%;
        width: 80px;
        object-fit: contain;
        padding-left: 20px;
        cursor: pointer;
    }
    
    .nav_avatar{
        position: fixed;
        cursor: pointer;
        right: 20px;
        width: 30px;
        height: 30px;
    }

Answer 1

而不是這個

<div className={`nav ${show && "active"}`}>

試試這個：

<div className={`nav ${show ? "active":""}`}>

Answer 2

我認為您需要將 CSS 編寫在一個單獨的文件中，例如，如果您不使用樣式組件。 在單獨的文件中編寫 CSS 類，然后在 JSX/JS 中導入 css 文件。

例如：

import "./navbar.css"

編輯：抱歉，剛剛重讀並注意到您的導航正在工作。 正如其他帖子所建議的那樣，您可能需要使用條件運算符： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Answer 3

我不知道是什么問題，但我再次卸載了 ns install vs code 我的問題解決了我真的不知道它是如何工作的，但它確實有效。