React多className使用问题求助：菜单激活时无法显示指定border-bottom样式

嘿，我看你是想给激活状态的导航项加上不同的底部边框，但卡在了多个className的处理上，还有一些小细节需要调整，我来一步步帮你搞定：

先梳理下你代码里的几个核心问题 #

• 你导入了CSS Modules的classes但完全没用到，反而自己定义了navigationitem变量，这会导致样式无法正确应用（因为CSS Modules会给类名自动加哈希后缀，直接写字符串匹配不到）
• 组件结构不符合HTML规范：<ul>直接包裹<a>标签是错误的，应该把<a>放在<li>里面
• 激活状态的类名引用逻辑错误，应该用classes.active而非navigationitem.active

修正后的React代码 #

import React from 'react';
import classes from './NavigationItem.css';

const navigationItem = (props) => (
  <li className={classes.NavigationItem}>
    <a 
      href={props.link} 
      className={props.active ? classes.active : ''}
    >
      {props.children}
    </a>
  </li>
);

export default navigationItem;

更通用的多className处理方案 #

如果之后你需要给导航项添加更多动态类，可以用数组过滤+join的方式，避免出现空类名的情况：

<a 
  href={props.link} 
  className={[
    // 固定基础类
    classes.someBaseClass,
    // 动态类：仅当条件满足时添加
    props.active && classes.active,
    props.isDisabled && classes.disabled
  ].filter(Boolean).join(' ')}
>
  {props.children}
</a>

或者用模板字符串（简单场景下更直观，空类名的空格不影响样式渲染）：

<a 
  href={props.link} 
  className={`${classes.NavigationItemLink} ${props.active ? classes.active : ''}`}
>
  {props.children}
</a>

改动说明 #

1. CSS Modules正确用法：导入的classes对象包含了处理后的类名，比如classes.NavigationItem对应你CSS里.NavigationItem的哈希版本，能避免全局样式冲突
2. 修复HTML结构：<ul>的直接子元素必须是<li>，这样既符合W3C规范，也能让你CSS里的.NavigationItem a选择器正确匹配元素
3. 动态类名逻辑：通过条件判断决定是否添加active类，激活状态时就能触发你CSS中定义的绿色底部边框样式

你的CSS代码逻辑是没问题的，只要React这边的类名和结构调整正确，就能实现想要的激活状态样式啦！

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