如何在nextjs中混合組件級scss和全局樣式

Question

我在我的項目中使用了Font Awesome並希望在用戶單擊它時更改組件的樣式。 這是反應代碼：

    <div
      role="button"
      onClick={() => toggleMenu(menu => (menu = !menu))}
      className={`${styles.toggleButton} ${close ? styles.showMenu : ""}`}
    >
      <i className="fal fa-horizontal-rule" />
      <i className="fal fa-horizontal-rule" />
      <i className="fal fa-horizontal-rule" />
    </div>

這是 scss 代碼：

.toggleButton {
  display: flex;
  flex-flow: column;
  cursor: pointer;

  i.fal {
    line-height: 8px;
    transition: transform 300ms ease-in-out;
  }
}

我的問題是i.fal樣式沒有得到應用，因​​為nextjs將它呈現為Header_toggleButton__2nd_H 。 我能想到的一種解決方案是向<i/>標簽添加一個自定義類，但是如果沒有 nextjs 在全局fal類之前添加如何做到這一點？ 此外，這種方法讓我覺得很麻煩，難道沒有更優雅而不那么冗長的解決方案嗎？

謝謝你的幫助。

編輯：我使用組件級 SCSS樣式。

CSS 模塊通過自動創建唯一的類名來局部作用於 CSS

Answer 1

我昨天就遇到了這個。 我的解決方案絕對是使用SCSS代碼風格

    <div
      role="button"
      onClick={() => toggleMenu(menu => (menu = !menu))}
      className={`toggleButton ${close ? showMenu : ""}`}
    >
      <i className="fal fa-horizontal-rule" />
      <i className="fal fa-horizontal-rule" />
      <i className="fal fa-horizontal-rule" />
    </div>

next native 支持的樣式在CSS 中很有用，但是在SCSS 中，我需要嵌套選擇器，所以我放棄了native 的用法。 你可以試試這個。