AppBar导航栏激活页面高亮时天蓝色文本样式无法生效问题

AI 小北

2026-9-25

问题原因

内联样式优先级更高：你在<Typography>组件上通过内联style强制设置了color: "white"，内联样式的优先级远高于外部类选择器.selected的样式规则，因此激活状态的天蓝色文本样式被覆盖无法生效。
样式作用层级不匹配：activeClassName是将selected类添加到<NavLink>父元素上，你当前定义的.selected的color属性仅作用于NavLink本身，子元素Typography默认不会继承该颜色，更何况子元素本身有独立的颜色设置。
版本兼容问题（若使用react-router v6）：v6版本的react-router已经移除了activeClassName属性，该属性仅在v5及更早版本可用，这也可能是激活类不生效的原因。
组件使用不规范：所有NavLink被包裹在同一个<IconButton>组件内，IconButton为单个可点击元素设计，多个导航项共用同一个会导致交互异常。

解决方案

方案1：调整CSS选择器+移除内联样式（推荐，适合react-router v5及更早版本）

移除所有组件上的内联style中的color配置，也可以将margin规则一并移入CSS统一管理
调整CSS规则，明确控制不同状态下的文本颜色：

/* 普通状态导航文本样式 */
NavLink .MuiTypography-body1 {
  margin-right: 1rem;
  color: white;
}
/* 激活状态样式 */
.selected {
  background-color: white;
}
.selected .MuiTypography-body1 {
  color: skyblue;
}

方案2：使用动态style适配所有版本（兼容react-router v6）

直接通过NavLink提供的isActive状态动态设置样式，不需要依赖activeClassName：

<NavLink 
  to='/'
  style={({ isActive }) => ({
    backgroundColor: isActive ? 'white' : 'transparent',
  })}
>
  <Typography
    variant='body1'
    style={{
      marginRight: "1rem",
      color: isActive ? 'skyblue' : 'white',
    }}
  >
    Dashboard
  </Typography>
</NavLink>

其余导航项按照相同逻辑修改即可。