Question

我在我的项目中使用了 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

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>

下一个本机支持的样式在CSS中很有用，但是在SCSS中，我需要嵌套的选择器，因此我放弃了本机的用法。你可以试试看。

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

1 个答案: