React+SCSS导航栏点击汉堡菜单后ul不显示问题求助

核心问题出在CSS Modules的类名匹配逻辑上：你使用的是.module.scss文件，所有自定义类名会被自动哈希化（比如styles.nav_links会生成类似HeroPage_nav_links_abc123的唯一类名），但你在JSX里直接添加了全局类"show"，导致SCSS里的选择器根本无法匹配到这个类。

修复步骤 #

1. 修正JSX类名绑定 #

把全局的"show"替换成模块化类名：

<div className={`${styles["nav_links"]} ${isOpen ? styles.show : ''}`}>

2. 调整SCSS选择器（二选一即可） #

方案一：嵌套选择器（推荐）

在媒体查询的.nav_links下用&.show匹配当前元素的show类：

@media screen and (max-width: 969px){
    .navbar{
        width: 100%;
        padding-top: .5em;
        
        .logo{
            font-size: 2rem;
        }
    
        .nav_toggle{
            display: block;
        }
    }  
    
    .nav_links{
        ul{
            width: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.5s ease-in-out; /* 把过渡效果移到初始状态，确保显示/隐藏都有动画 */
        }

        // 用&匹配当前.nav_links元素，绑定show类
        &.show ul{
            opacity: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 90vh;
            position: absolute;
            top: 90px;
            left: 0;
            background-color: antiquewhite;
        }
    }
}

方案二：全局类标记

如果想保留全局show类，需要在SCSS里用:global()包裹：

@media screen and (max-width: 969px){
    // ... 其他代码不变
    .nav_links{
        ul{
            width: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        :global(.show) ul{
            opacity: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 90vh;
            position: absolute;
            top: 90px;
            left: 0;
            background-color: antiquewhite;
        }
    }
}

此时JSX可保持${isOpen && "show"}不变。

3. 额外优化 #

给nav添加相对定位，确保绝对定位的ul不会脱离导航栏范围：

nav{
    width: 100%;
    height: 90px;
    background: #333;
    z-index: 1;
    transition: 0.5s ease-in;
    position: relative; /* 添加此行 */
}

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