Search code examples
csstypescriptsassnext.jstsx

Sass style throws undefined after compilation in NextJS

I have peace of sass code:

.link
  display: inline-table
  text-align: center
  align-self: center
  margin: 5px 15px
  font-size: 20px
  color: black
  text-decoration: none
  transition: 0.1s ease-in-out

.link:hover
  text-decoration: underline

.link-red:hover
  text-decoration: underline
  color: $color-red

And I have peace of index.tsx code:

<div>
   <a href={link} className={styles.link + " " + styles.linkRed}>{linktext}</a>
</div>

After compiling, at the exit I get this piece of compiled html:

<div>
   <a href="/auth/login" class="links_link__31hqZ undefined">Login</a>
</div>

As we can see style link have been succesfully compiled and attached but second file turned into undefined.

Why second style link-red turned into undefined?

Solution

  • Because you have styles.linkRed but in css you have link-red class with a dash. So in jsx you need to use styles['link-red'].

    Next.js does not have configuration for automatic camelCase right now, but you can follow this discussion for more details