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

Question

已验证 classname 是使用 classList.toggle（“活动”）创建的。但是，css 不能与生成的 class 名称一起应用。供您参考，CSS 使用了 CSS 模块。如果您尝试通过标签执行代码，classname 将得到很好的应用。但是，css 不适用于在该标签中创建的 class 个名称。

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

   @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]

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

Answer 1

CSS 模块根据 CSS 文件中的名称生成新的 class 名称，以便将它们限定到特定组件。

结果是一个 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);
};

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

After creating classList.toggle('active') you try to apply CSS, but it does not work

html

css

reactjs

react-css-modules