CODEWITHSUNDEEP
javascriptreactjssassfont-awesomenext.js
Gh05d
Gh05d

Reputation: 8982

How to mix component level scss and global styles in nextjs

I am using Font Awesome in my project and want to change the styling of a component when the user clicks on it. Here is the React code:

    <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>

And here is the scss code:

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

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

My problem is that the i.fal style does not get applied, as nextjs renders it like this Header_toggleButton__2nd_H. One solution I can think of would be add a custom class to the <i/> tags, but how can this be done without nextjs prepending the global fal classes? Furthermore, this approach strikes me as cumbersome, isn't there a more elegant not so verbose solution?

Thanks for any help.

EDIT: I use the Component-Level SCSS style.

CSS Modules locally scope CSS by automatically creating a unique class name

Upvotes: 0

Views: 1213

Answers (1)

allen wang
allen wang

Reputation: 1147

I happen to this yesterday. My solution is absolutely to use SCSS code style

    <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>

the style which next native supports is useful in CSS, but in SCSS, I need the nested selectors, so I abandon the native usage. you can try this.

Upvotes: 1

Related Questions