React导航组件移动端菜单CSS失效问题排查求助

我开发的React导航组件，除了移动端（屏幕宽度≤700px）场景外，其余功能正常。汉堡菜单能正常显示，但导航菜单无法应用预期样式，点击汉堡按钮后也没法正确展开。试过用标签名替代类名设置样式，问题依旧，找不到代码错误。

React组件代码 #

import React , {useState} from "react";
import Hamburger from "hamburger-react"

export default function Nav() {
    const [isExpended , setIsExpended] = useState(false)
    return(
            <nav className="navigation">
                <a href="/" className="brand-name">WebName</a>
                <button onClick={() => {
                    setIsExpended(!isExpended)
                }}                 
                className="hamburger"><Hamburger /></button>
                <div  className={isExpended?"navigation-menu.expended":"navigation-menu"}>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="/">About</a></li>
                        <li><a href="/">Help</a></li>
                    </ul>
                </div>
            </nav>
    )
}

现有CSS代码 #

.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}

.brand-name {
    text-decoration: none;
    color: black;
    font-size: 1.3rem;
    margin-left: 1rem;
}
.navigation-menu {
    margin-left: auto;
}
.navigation-menu ul {
    display: flex;
    padding: 0;
}
.navigation-menu li {
    list-style-type: none;
    margin: 0 1rem;
}
.navigation-menu li a {
    text-decoration: none;
    width: 100%;
    justify-content: stretch;

}
.hamburger{
    border: 0;
    
    border-radius: 20%;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    display: none;
}

@media screen and (max-width:700px) {
    .navigation-menu ul{
        display:none;
    }
}
@media screen and (max-width:700px){
    .hamburger{
        display: block;
    }
}

不生效的移动端样式代码 #

@media screen and (max-width:700px){
        .navigation-menu ul{
            flex-wrap: wrap;
            position: absolute;
            top: 60px;
            left: 0;
            flex-direction: column;
            width: 100%;
            height: calc(100vh - 77px);
            background-color: #fff;
            border-top: 1px solid black;
        }
        .navigation-menu li{
            text-align: center;
            margin: 0;
        }
        .navigation-menu li a{
            color: black;
            width: 100%;
            padding: 1.5rem 0;
        }
        .navigation-menu li:hover{
            background-color: #eee;
        }
}

@media screen and (max-width:700px){
    .navigation-menu ul{
        display: none;
    }
}
@media screen and (max-width:700px){
    .navigation-menu-expended ul{
        display: block;
    }
}

问题根源与修复方案 #

1. 类名拼写/语法错误 #

React代码中，展开状态的类名写了navigation-menu.expended，这里的.是错误语法——多个类名应该用空格分隔。同时你CSS中用的是navigation-menu-expended，和React里的类名不匹配，导致样式无法触发。

修正后的React组件中div的className：

<div className={isExpended ? "navigation-menu expended" : "navigation-menu"}>

或者统一使用连字符类名：

<div className={isExpended ? "navigation-menu-expanded" : "navigation-menu"}>

2. CSS样式优先级冲突 #

你重复定义了两次max-width:700px下的.navigation-menu ul规则，后面的display:none会覆盖前面的样式，导致菜单始终隐藏。需要合并媒体查询，只在展开状态下显示菜单并应用样式。

修正后的移动端CSS：

@media screen and (max-width:700px) {
    .hamburger{
        display: block;
    }
    /* 默认隐藏菜单 */
    .navigation-menu ul{
        display:none;
    }
    /* 展开状态显示菜单并应用样式 */
    .navigation-menu.expended ul,
    .navigation-menu-expanded ul {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: 60px;
        left: 0;
        flex-direction: column;
        width: 100%;
        height: calc(100vh - 77px);
        background-color: #fff;
        border-top: 1px solid black;
    }
    .navigation-menu.expended li,
    .navigation-menu-expanded li {
        text-align: center;
        margin: 0;
    }
    .navigation-menu.expended li a,
    .navigation-menu-expanded li a {
        color: black;
        width: 100%;
        padding: 1.5rem 0;
        display: block; /* 让a标签占满宽度，提升点击体验 */
    }
    .navigation-menu.expended li:hover,
    .navigation-menu-expanded li:hover {
        background-color: #eee;
    }
}

3. 补充说明 #

• 确保React和CSS中的类名完全匹配，避免拼写错误；
• 合并相同媒体查询的规则，避免样式覆盖；
• 给移动端的a标签添加display:block，确保点击区域足够大。

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