创建 classList.toggle('active') 后，您尝试应用 CSS，但它不起作用答案

【问题标题】：After creating classList.toggle('active') you try to apply CSS, but it does not work创建 classList.toggle('active') 后，您尝试应用 CSS，但它不起作用
【发布时间】：2021-11-01 10:21:29
【问题描述】：

已验证类名是使用 classList.toggle ("active") 创建的。但是，css 不能与生成的类名一起应用。供您参考，CSS 使用了 CSS 模块。如果您尝试通过标签执行代码，类名将得到很好的应用。但是，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>

CSS

   @media all and (max-width: 599px) {
  .nav {
    flex-direction: column;

    height: auto;
    align-items: flex-start;
  }
  .logo {
    margin-left: 0;
    padding: 1rem 1rem;
    align-self: flex-start;
  }
  .menulist {
    margin-right: 0;
    flex-direction: column;
    align-self: center;
    display: none;
  }
  .active {
    display: flex;
  }
  .menu {
    margin-right: 0;
    justify-content: center;
    padding: 10px 0;
  }
  .menu a {
    font-size: 1.5rem;
  }
  .container {
    display: inline;
    position: absolute;
    right: 2rem;
    top: 1.8rem;
  }

  .icon .sticks {
    background: white;
    display: block;
    height: 5px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 50px;
  }

  .icon .sticks:before,
  .icon .sticks:after {
    background: white;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
  }

  .icon .sticks:before {
    top: 10px;
  }

  .icon .sticks:after {
    top: -10px;
  }
  .check {
    display: none;
  }

  .check:checked ~ body {
    opacity: 0;
  }

  .check:checked ~ .icon .sticks {
    background: transparent;
  }

  .check:checked ~ .icon .sticks:before {
    transform: rotate(-45deg);
  }

  .check:checked ~ .icon .sticks:after {
    transform: rotate(45deg);
  }

  .check:checked ~ .icon:not(.steps) .sticks:before,
  .check:checked ~ .icon:not(.steps) .sticks:after {
    top: 0;
  }
}

[![在此处输入图像描述][1]][1] [![在此处输入图片描述][2]][2]

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

【问题讨论】：

所以你想触发active类或者验证它是否存在？
目标是toggle后显示navbar。此时toggle后创建了classname，但是css并没有应用于创建的classname。我希望menuist的显示从none变为flex，但它不起作用。
您能否为您的代码提供更多上下文？
我现在修改了帖子，请检查。
检查你的屏幕宽度，我看到你在max 599px进行媒体查询

标签： html css reactjs react-css-modules

【解决方案1】：

CSS 模块从您的 CSS 文件中生成新的类名，以便将它们限定为特定组件。

这样的结果是一个像下面这样的 javascript 对象：

import styles from 'Styles.module.css'

console.log(styles)

/*
Which would output something like this:

{
  active: 'Active_7AC34'
}
*/

您正在使用字符串文字 "active" 而不是 CSS 模块生成的值。你应该做的是：

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

【讨论】：