有嵌套的scss時如何參考className？nextjs

我有一個帶有漢堡按鈕的導航欄，我想在點擊時更改樣式（欄顏色和漢堡按鈕樣式）。我提到我已經嘗試在 scss 檔案上使用 &:active, &.activeBar。由于某種原因，背景顏色沒有改變，漢堡按鈕也沒有變成 X

這是我的 SCSS 檔案：

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

這就是我嘗試更改 js 檔案中的類名的地方：

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;

uj5u.com熱心網友回復：

在您的代碼中，您將添加active為“全域”類。嘗試將:global標志添加到您的樣式表：

...
  &: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);
      }
    }
  }
...

uj5u.com熱心網友回復：

使用classnames包（https://www.npmjs.com/package/classnames）組合相同元素上的類，其余的處理方式與 vanilla html/css/js 中的相同 在您使用的代碼中，active它也應該出現來自樣式并使用以下方法組合：

classnames('styles.ElementClassName', active && styles.active)

uj5u.com熱心網友回復：

active在常規類上添加選擇器.hamburger應在觸摸時觸發。你 scss 中的類名也是，activeBar但你的反應應用程式中只有active.

&.clicked {
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);
  }

 }
   }

如果您還想更改 topBar，則需要稍微更改 TopBar 組件

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

const Topbar = ({ open, toggle }) => {
    const [isClicked, setIsClicked] = useState(false);
  function menuToggled() {
    toggle(!open);
    console.log('menuToggled', open);
  }
  return (
    <div className={`${styles.topbar} ${open ? 'active' : ''} ${ isClicked && ' clicked'}`}>
      <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} onTouchStart={(e) => setIsClicked(true)}>
            <span className={styles.line1}></span>
            <span className={styles.line2}></span>
            <span className={styles.line3}></span>
          </div>
        </div>
      </div>
    </div>
  );
};

標籤：javascript css 反应 粗鲁的 下一个.js

上一篇：單擊按鈕后如何更改按鈕的背景顏色？

下一篇：僅在錯誤處理和Fetch完成后才呈現值