My peace lies in the 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 tranquility can be found in the index.tsx code:
<div>
<a href={link} className={styles.link + " " + styles.linkRed}>{linktext}</a>
</div>
Once compiled, the resulting html is as follows:
<div>
<a href="/auth/login" class="links_link__31hqZ undefined">Login</a>
</div>
While style link was successfully compiled and attached, the second one ended up as undefined.
What caused style link-red to become undefined?