React项目开发构建与GitHub Pages生产构建CSS样式不一致（移动端汉堡按钮异常）求助

大家好，我遇到一个头疼的问题：我的React项目在开发环境下一切正常，样式和功能都没问题，但用gh-pages包部署到GitHub Pages之后（是跟着官方指南操作的），移动端的汉堡按钮样式出问题了。

具体情况是这样的：这个汉堡按钮的逻辑是给父div（.navContainer）和nav元素添加/移除.openMenu类来切换菜单显示状态——正常未点击时菜单应该隐藏在左侧，点击后才滑出来显示。但生产构建部署后，菜单一直是显示状态的，我检查了DevTools，发现类名的添加和移除是正常工作的，但默认状态（不带.openMenu类）的CSS样式要么没正确加载，要么切换不生效。

我放几张截图直观说明：

• 菜单相关的CSS样式截图：
• 生产构建的异常效果：
• 开发环境正常状态（未激活菜单）：
• 开发环境正常状态（已激活菜单）：

更新进展：
我查看了生产环境的压缩CSS代码，发现构建工具好像把CSS类名合并了，但默认状态（不带.openMenu的类）的样式被忽略了，压缩后的代码是这样的：

.Nav_navContainerGhavJ,
.Nav_navContainerGhavJ.Nav_openMenuL+8i0,
.Nav_navp72ig,
.Nav_navp72ig.Nav_openMenuL+8i0 {
@media screen and (max-width: 852px) {
left: 0;
opacity: 1;
position: absolute;
}
}

能看出来不管有没有.openMenu类，这些样式都被应用了，所以菜单一直处于显示状态。我试过修改类名，但没有解决问题，有没有朋友遇到过类似的情况？求指点！

备注：内容来源于stack exchange，提问作者Arthur