How do i refer the className when having a nested scss ? nextjs reactjs

June 6, 2022

I have a navbar with a hamburger button and i want to change the style (the bar color and the hamburger button style) on tap. I mention that i’ve tried using &:active, &.activeBar on the scss file.
For some reason the background color doesn t change and the hamburger button doesn’t turn into an X

This is my SCSS file:

.topbar {
  width: 100%;
  background-color: $secondaryColor;
  color: $mainColor;
  height: 70px;
  position: fixed;
  top: 0;
  z-index: 3;
  transition: all 1s ease;
  overflow: hidden;

  .wrapper {
    padding: 10px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
  }

  .left {
    display: flex;
    align-items: center;
    margin: 10;
    .itemContainer {
      display: flex;
      align-items: center;

      .icon {
        font-size: 36px;
        margin-right: 5px;
        &:hover {
          color: blue;
        }
      }
      span {
        font-size: 15px;
        font-weight: 700;
      }
    }
    .logo {
      font-size: 40px;
      font-weight: 700;
      text-decoration: none;
      color: inherit;
      margin-right: 40px;
    }
  }

  .right {
    .hamburger {
      width: 32px;
      height: 25px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      span {
        width: 100%;
        height: 3px;
        background-color: $mainColor;
        transform-origin: left;
        transition: all 0.5s ease;
      }
    }
  }

  &.activeBar {
    background-color: $mainColor;
    color: $secondaryColor;
    .hamburger span {
      &:first-child {
        background-color: $secondaryColor;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:last-child {
        background-color: $secondaryColor;
        transform: rotate(-45deg);
      }
    }
  }
}

And this is where i try to change the classname in my js file:

import React from 'react';
import styles from './topbar.module.scss';
import { Facebook } from '@material-ui/icons';

const Topbar = ({ open, toggle }) => {
  function menuToggled() {
    toggle(!open);
    console.log('menuToggled', open);
  }
  return (
    <div className={`${styles.topbar} ${open ? 'active' : ''}`}>
      <div className={styles.wrapper}>
        <div className={styles.left}>
          <a href='#slider' className={styles.logo}>
            Muntenia cu gust
          </a>
          <div className={styles.itemContainer}>
            <Facebook
              className={styles.icon}
              onClick={() => window.open('https://stackoverflow.com/')}
            />
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.hamburger} onClick={menuToggled}>
            <span className={styles.line1}></span>
            <span className={styles.line2}></span>
            <span className={styles.line3}></span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Topbar;

>Solution :

In your code, you’re adding active as a "global" class. Try adding the :global flag to your stylesheet:

...
  &:global(.active) {
    background-color: $mainColor;
    color: $secondaryColor;
    .hamburger span {
      &:first-child {
        background-color: $secondaryColor;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:last-child {
        background-color: $secondaryColor;
        transform: rotate(-45deg);
      }
    }
  }
...