Next.js/React嵌套SCSS下className引用与样式切换问题

样式不生效是三个核心错误：

• 误用伪类：&:active是鼠标按下瞬间的临时状态，无法实现点击后持久切换的激活效果，你用独立类名控制激活态的思路是正确的，但类名匹配出了问题
• 类名不匹配：你SCSS中定义的激活态类是activeBar，但JSX里动态拼接的是字符串'active'，两个类名完全不一致
• CSS Modules引用错误：你使用的是SCSS模块化方案（文件后缀为.module.scss），所有类名编译后会生成唯一哈希值，直接写裸字符串类名不会被模块化编译，永远无法匹配到样式规则

1. 修改JSX中顶部导航栏的className拼接逻辑 #

所有模块化的类名都需要从导入的styles对象中获取，替换原有错误的类名拼接代码：

// 错误写法
<div className={`${styles.topbar} ${open ? 'active' : ''}`}>

// 修正后写法
<div className={`${styles.topbar} ${open ? styles.activeBar : ''}`}>

2. 校验状态逻辑 #

点击按钮后如果类名仍未切换，检查父组件传入的toggle方法是否正确更新了open状态值，你当前组件内的menuToggled方法逻辑是正确的。

修改完成后点击汉堡按钮：

• 顶部导航栏会按照1秒的过渡动画切换背景色与文字颜色
• 汉堡按钮的三条横线会在0.5秒动画后，上下两条旋转45度拼成X形，中间线条透明消失，实现关闭按钮效果

提示：如果需要优化汉堡按钮线条的单独控制，可以将你给span加的line1/line2/line3类对应写到SCSS规则中，当前使用子元素序号选择的写法不影响激活态功能正常运行。

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