使用useState和useEffect实现导航栏样式切换遇阻求助

1. 拆分CSS样式，分离文字颜色与下划线逻辑 #

把下划线类里的文字颜色属性删掉，只保留下划线相关样式，把文字颜色和下划线颜色的控制权交给导航栏的全局状态类：

/* globals.css */
/* 基础下划线样式，不包含文字颜色 */
.nav-link-underline {
  position: relative;
  text-decoration: none;
}

.nav-link-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  transition: width 0.3s ease;
}

/* 导航栏透明状态：白字+白下划线 */
.nav-transparent .nav-link-underline {
  color: white;
}

.nav-transparent .nav-link-underline::after {
  background-color: white;
}

/* 导航栏白色背景状态：黑字+黑下划线 */
.nav-white .nav-link-underline {
  color: black;
}

.nav-white .nav-link-underline::after {
  background-color: black;
}

/* 可选：激活状态下划线展开 */
.nav-link-underline.active::after {
  width: 100%;
}

2. 控制导航栏根元素类，批量切换所有链接样式 #

不用单独维护每个链接的textColor状态，直接给导航栏根元素切换类，所有链接自动继承对应样式：

// Navbar.js
import { useState, useEffect } from 'react';

export default function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 90);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`navbar ${isScrolled ? 'nav-white' : 'nav-transparent'}`}>
      <a href="/" className="nav-link-underline active">Home</a>
      <a href="/about" className="nav-link-underline">About</a>
      <a href="/contact" className="nav-link-underline">Contact</a>
    </nav>
  );
}

3. 单个链接激活状态优化（可选） #

如果需要根据路由高亮当前页面链接，只需给对应链接加active类即可，完全不影响全局切换逻辑：

// Navbar.js（以Next.js路由为例）
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Navbar() {
  const router = useRouter();
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 90);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`navbar ${isScrolled ? 'nav-white' : 'nav-transparent'}`}>
      <a 
        href="/" 
        className={`nav-link-underline ${router.pathname === '/' ? 'active' : ''}`}
      >
        Home
      </a>
      <a 
        href="/about" 
        className={`nav-link-underline ${router.pathname === '/about' ? 'active' : ''}`}
      >
        About
      </a>
    </nav>
  );
}

内容的提问来源于stack exchange，提问作者Sebastian Clarke