Search code examples
htmlcssreactjsreact-css-modules

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


It is verified that classname is created using classList.toggle ("active"). However, css cannot be applied with the generated class name. For your information, CSS used CSS module. If you try code execution by tags classname will be applied well. However, css does not apply to class names created in that tag.

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;
  }
}

[![enter image description here][1]][1] [![enter image description here][2]][2]

I don't know why it can't be applied in this situation. Please help me.


Solution

  • CSS modules generate new class names from the ones in your CSS file in order to scope them to a particular component.

    The result of this is a javascript object like the following:

    import styles from 'Styles.module.css'
    
    console.log(styles)
    
    /*
    Which would output something like this:
    
    {
      active: 'Active_7AC34'
    }
    */
    
    

    You are using the string literal "active" instead of the value generated by the CSS module. What you should do instead is this:

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