Question

我写了一个简单的导航栏，它有一个滚动动画。示例：

<div className={"nav active"}>

此处 active 上的 CSS 不起作用。即使我在我的 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

代替这个

试试这个：

Answer 2

例如，如果您不使用 styled components，我认为您需要将 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 我的问题解决了我真的不知道它是如何工作的，但它确实有效。

我的 CSS 在 vs 代码中无法正常工作

3 个答案: