我试图改变我的汉堡图标onClick它的样式，通过使用钩子添加一个类名，然后在sass中针对新添加的类。已正确添加className，但新样式未生效
我已经尝试过打乱我嵌套我的风格的方式，我是新的sass和React，但我认为我的目标一切正确。

import { useContext, useState } from "react";
import { Link } from "react-router-dom";

import classes from "./styles/MainNavigation.module.css";
import FavoritesContext from "../../store/favorites-context";

function MainNaviagtion() {
  const [isOpen, setOpen] = useState(false);
  const favoriteCtx = useContext(FavoritesContext);

  const mobileMenuHandler = () => {
    setOpen(!isOpen);
  };

  return (
    <header className={classes.header}>
      <div className={classes.logo}>Meet Up Tracker</div>
      <nav>
        <ul id={classes.menu}>
          <li>
            <Link className={classes.link} to="/">
              All Meetups
            </Link>
          </li>
          <li>
            <Link className={classes.link} to="/new-meetups">
              New Meetups
            </Link>
          </li>
          <li>
            <Link className={classes.link} to="/favorites">
              My Favorites
              <span className={classes.badge}>
                {favoriteCtx.totalFavorites}
              </span>
            </Link>
          </li>
        </ul>
      </nav>

      <div id={classes.hamburgerIcon} onClick={mobileMenuHandler} className={isOpen ? 'open' : null}>
        <div  className={classes.bar1}></div>
        <div className={classes.bar2}></div>
        <div className={classes.bar3}></div>
        <ul className={classes.mobileMenu}>
          <li>
            <Link className={classes.link} to="/">
              All Meetups
            </Link>
          </li>
          <li>
            <Link className={classes.link} to="/new-meetups">
              New Meetups
            </Link>
          </li>
          <li>
            <Link className={classes.link} to="/favorites">
              My Favorites
              <span className={classes.badge}>
                {favoriteCtx.totalFavorites}
              </span>
            </Link>
          </li>
        </ul>
      </div>
    </header>
  );
}

export default MainNaviagtion;

$mobile: 576px;
$tablet: 768px;
$laptop: 992px;
$desktop: 1200px;

.header {
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #77002e;
  padding: 0 10%;

  .logo {
    font-size: 30px;
    color: white;
    font-weight: bold;
  }

  .badge {
    background-color: #cc2062;
    color: white;
    border-radius: 12px;
    padding: 0 1rem;
    margin-left: 0.5rem;
  }
}

#hamburgerIcon {
  margin: auto 0;
  display: none;
  cursor: pointer;

  div {
    width: 35px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
  }
}

 .open {
      .bar1 {
        -webkit-transform: rotate(-45deg) translate(-6px, 6px);
        transform: rotate(-45deg) translate(-6px, 6px);
      }

      .bar2 {
        opacity: 0;
      }

      .bar3 {
        -webkit-transform: rotate(45deg) translate(-6px, -8px);
        transform: rotate(45deg) translate(-6px, -8px);
      }

      .mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
      }
    }

.mobileMenu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-inline-box;
  align-items: baseline;
}

.header li {
  margin-left: 3rem;
}

.header a {
  text-decoration: none;
  font-size: 20px;
  color: #fcb8d2;
}

.header a:hover,
.header a:active,
.header a.active {
  color: white;
}

@media (max-width: $tablet) {
  .header {
    .logo {
      font-size: 25px;
    }
    .link {
      display: flex;
      align-items: center;
      font-size: 15px;
      border: 2px solid black;
    }
  }

  .header ul {
    display: -webkit-inline-box;
  }

  .header li {
    margin-left: 1rem;
  }
}

@media (max-width: $mobile) {
  #menu {
    display: none;
  }

  #hamburgerIcon {
    display: block !important;
  }
}