React点击切换类名后transform:translateX(0%)样式不生效问题

样式不生效是CSS选择器优先级不足导致的：

• 移动端媒体查询中，控制导航默认隐藏的选择器是.nav ul，权重为「类选择器+元素选择器」，权重值11
• 你写的显示状态选择器.nav-active只有单个类选择器，权重值10，优先级低于前者
  即使nav-active类成功添加到ul标签上，它的transform属性也会被更高优先级的.nav ul规则覆盖，所以看不到侧滑效果。

优先通过调整选择器权重解决，不推荐滥用!important打乱CSS优先级规则：

调整选择器（推荐） #

把媒体查询内的.nav-active选择器修改为和隐藏规则权重一致的写法，因为CSS后写的同权重规则会覆盖先写的规则，直接替换navbar.css对应部分即可：

@media screen and (max-width: 500px) {
  body{
    overflow-x: hidden;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .nav ul{
    position:absolute;
    top:10vh;
    right:0px;
    width:50%;
    height:90vh;
    background-color: #16003B;
    flex-direction: column;
    transform: translateX(100%);
    justify-content: space-evenly;
    align-items: center;
    transition: 0.5s ease-in;
  }
  /* 替换原来的.nav-active选择器 */
  .nav ul.nav-active {
    transform: translateX(0);
  }
}

临时快速修复 #

如果需要快速验证效果，可以给属性加!important强制提升优先级，但不建议在生产环境长期使用，会提升后续样式维护成本：

.nav-active {
  transform: translateX(0) !important;
}

你在handleBurgerClick中打印的isShowNavLinks会显示更新前的旧值，这是React状态异步更新的正常现象，如果需要查看状态最新值，可以通过useEffect监听状态变化打印，这个细节不影响当前侧滑功能的实现。

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