React导航栏点击激活后下划线颜色异常问题求助

问题根源 #

1. 事件绑定错误：你在NavItem的onClick中直接调用了handleMouseClick(props.color)，这会导致组件渲染时就立即执行该函数，而非点击时触发。三个导航项依次执行后，全局--colorUnderline变量会被最后一个LOGIN的颜色覆盖，所以无论点击哪个项，下划线都会显示最后一次设置的颜色。
2. 全局CSS变量方案不合理：全局变量是共享状态，无法为每个导航项单独维护下划线颜色，这不符合你“下划线与当前元素颜色一致”的需求。

修复方案（更简洁的实现） #

我们可以去掉全局变量和点击事件，直接让下划线继承对应导航项的颜色，同时简化组件结构：

1. 简化React组件代码

不需要单独的NavItem组件，直接在NavLink中处理样式和内容，同时利用style属性传递颜色：

const Navigation = () => {
  return (
    <div className="navigation">
      <ul>
        <NavLink 
          to="/artists" 
          className={({ isActive }) => isActive ? "nav-active" : ""}
          style={{ color: variables.artistsColor }}
        >
          ARTISTS
        </NavLink>
        <NavLink 
          to="/project" 
          className={({ isActive }) => isActive ? "nav-active" : ""}
          style={{ color: variables.projectColor }}
        >
          PROJECT
        </NavLink>
        <NavLink 
          to="/login" 
          className={({ isActive }) => isActive ? "nav-active" : ""}
          style={{ color: variables.loginColor }}
        >
          LOGIN
        </NavLink>
      </ul>
    </div>
  );
};

2. 修改SCSS代码

让.nav-active::after的背景色直接继承父元素（即NavLink）的颜色，不需要全局变量：

.navigation {
  font-family: "font-1";

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px;
    list-style: none;
    font-size: 40px;

    a {
      padding: 50px;
      display: inline-block;
      transition: 0.2s;
      cursor: pointer;
      text-decoration: none; /* 去掉默认链接下划线 */

      &:hover {
        opacity: .5;
      }
    }

    .nav-active {
      position: relative;

      &::after {
        content: "";
        height: 4px;
        width: 0;
        background: inherit; /* 继承父元素的文字颜色 */
        position: absolute;
        border-radius: 10px;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        animation: anim 0.6s ease forwards;
      }
    }
  }
}

@keyframes anim {
  to {
    width: 100%;
  }
}

额外优化（可选） #

如果想保持NavItem组件的复用性，可以调整组件结构，让颜色作为局部CSS变量传递：

const NavItem = ({ color, title }) => {
  return (
    <li style={{ "--itemColor": color, color: color }}>
      {title}
    </li>
  );
};

// 在Navigation中使用
<NavLink 
  to="/artists" 
  className={({ isActive }) => isActive ? "nav-active" : ""}
>
  <NavItem color={variables.artistsColor} title="ARTISTS" />
</NavLink>

对应的SCSS修改：

.nav-active::after {
  /* ... 其他属性 ... */
  background: var(--itemColor); /* 使用局部变量 */
}

这样每个NavItem都有自己的局部CSS变量，下划线颜色会和当前项的颜色完全匹配，同时避免了全局变量的冲突问题。

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