为活跃NavLink添加active类后对应CSS样式未生效，该如何排查？

核心问题点 #

• NavLink使用错误：你当前写的<NavLink to='/xxx'/>是自闭和标签，完全没有包裹对应菜单文本，既无法触发点击跳转，也不会将active状态和对应菜单内容关联
• 样式作用对象不匹配：NavLink默认会把active类加在自身生成的<a>标签上，如果你想要样式作用于父级MenuItem，父级元素不会自动继承子元素的类名
• CSS优先级不足：你使用的是第三方UI库的Menu/MenuItem组件，组件自带的默认样式优先级高于你自定义的.active类样式，会覆盖你的自定义规则
• 样式参数异常：你写的font-size: 50rem属于异常数值，哪怕样式生效也会因为元素尺寸严重溢出父容器，导致你看不到生效效果

修复步骤 #

1. 修正NavLink的嵌套结构，将菜单文本放在NavLink内部，保证点击可触发状态切换：

<Menu iconShape="square">
  <MenuItem icon={<FiHome />}>
    <NavLink to='/'>Home</NavLink>
  </MenuItem>
  <MenuItem icon={<FaList />}>
    <NavLink to='/problematica'>Cadastrar Problemática</NavLink>
  </MenuItem>
  <MenuItem icon={<FaRegHeart />}>
    <NavLink to='/colaborador'>Cadastrar Usuário</NavLink>
  </MenuItem>
  <MenuItem icon={<RiPencilLine />}>Reuniões Marcadas</MenuItem>
  <MenuItem icon={<BiCog />}>Configuração</MenuItem>
</Menu>
</SidebarContent>

如果需要点击整个MenuItem区域都能跳转，可以把NavLink套在MenuItem外层：

<NavLink to='/problematica'>
  <MenuItem icon={<FaList />}>Cadastrar Problemática</MenuItem>
</NavLink>

2. 显式指定active类名（React Router v6默认是active，可主动声明避免配置异常）：

<NavLink 
  to='/problematica' 
  className={({isActive}) => isActive ? 'active' : ''}
>
  Cadastrar Problemática
</NavLink>

3. 提升CSS优先级，修正异常样式参数：

/* 加上UI库MenuItem的默认类名提升优先级，可按实际F12查到的类名替换示例中的menu-item */
.menu-item .active {
    height: 100%;
    align-items: center;
    font-weight: 100;
    display: flex;
    background-color: #fb8500;  
    font-size: 1rem;
    line-height: 1.5rem;
}

如果还是被覆盖，可以暂时加!important测试是否是优先级问题：background-color: #fb8500 !important;，确认后再调整选择器优先级即可。

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