验证classname是使用classlist.toggle（“active”）创建的。 但是，不能用生成的类名应用css。 为了您的信息，CSS使用了CSS模块。 如果尝试通过标记执行代码，classname将得到很好的应用。 但是，css不适用于在该标记中创建的类名。

JS

    const menuList = document.getElementsByClassName(styles.menulist);
    const onClick = (e) => {
        // menuList.classList.toggle("active");
        menuList[0].classList.toggle("active");
      };

<header className={styles.nav}>
      <img src={logo} className={styles.logo} alt="mondayoff" />
      <ul className={styles.menulist}>
        <li className={styles.menu}>
          <Link to="/">Home</Link>
        </li>
        <li className={styles.menu}>
          <Link onClick={scrollByAbout}>About</Link>
        </li>
        <li className={styles.menu}>
          <Link onClick={scrollByGame} className={styles.gameClick}>
            Game
          </Link>
        </li>
        <li className={styles.menu}>
          <Link to="/article">Article</Link>
        </li>
        <li className={styles.menu}>
          <Link>Contact</Link>
        </li>
      </ul>
      <div className={styles.container}>
        <input className={styles.check} type="checkbox" id="burger-check" />
        <label
          className={styles.icon}
          id="icon"
          for="burger-check"
          onClick={onClick}
        >
          <span className={styles.sticks}></span>
        </label>
      </div>
    </header>

CSS

    const menuList = document.getElementsByClassName(styles.menulist);
    const onClick = (e) => {
        // menuList.classList.toggle("active");
        menuList[0].classList.toggle("active");
      };

<header className={styles.nav}>
      <img src={logo} className={styles.logo} alt="mondayoff" />
      <ul className={styles.menulist}>
        <li className={styles.menu}>
          <Link to="/">Home</Link>
        </li>
        <li className={styles.menu}>
          <Link onClick={scrollByAbout}>About</Link>
        </li>
        <li className={styles.menu}>
          <Link onClick={scrollByGame} className={styles.gameClick}>
            Game
          </Link>
        </li>
        <li className={styles.menu}>
          <Link to="/article">Article</Link>
        </li>
        <li className={styles.menu}>
          <Link>Contact</Link>
        </li>
      </ul>
      <div className={styles.container}>
        <input className={styles.check} type="checkbox" id="burger-check" />
        <label
          className={styles.icon}
          id="icon"
          for="burger-check"
          onClick={onClick}
        >
          <span className={styles.sticks}></span>
        </label>
      </div>
    </header>

[！[在此处输入图像说明][1]][1] [！[在此处输入图像说明][2]][2]

我不知道为什么在这种情况下不能应用。请帮帮我。

顺晟科技：

CSS模块从CSS文件中的类名生成新的类名，以便将它们作用于特定组件。

结果是如下所示的javascript对象: