如何在 nextjs 中混合组件级 scss 和全局样式答案

【问题标题】：How to mix component level scss and global styles in nextjs如何在 nextjs 中混合组件级 scss 和全局样式
【发布时间】：2020-12-22 13:41:06
【问题描述】：

我在我的项目中使用 Font Awesome，并希望在用户单击组件时更改其样式。这是 React 代码：

    <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 类之前添加一个自定义类，如何做到这一点？此外，这种方法让我觉得很麻烦，难道没有更优雅而不那么冗长的解决方案吗？

感谢您的帮助。

编辑： 我使用Component-Level SCSS 样式。

CSS 模块通过自动创建唯一的类名来本地化 CSS

【问题讨论】：

标签： javascript reactjs sass font-awesome next.js

【解决方案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 的使用。你可以试试这个。

【讨论】：

嗯，使用 Component Level scss 是行不通的。这很不幸，因为我喜欢那个解决方案。