Sass 在 NextJS 中编译后样式抛出未定义

Question

我有平安sass码：

.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

我有平安 index.tsx 代码：

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

编译后，在退出时得到这段编译好的html:

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

正如我们所见，样式 link 已成功编译并附加，但第二个文件变成了 undefined。

为什么第二种风格link-red变成了undefined？

Answer 1

因为您有 styles.linkRed 但在 css 中您有 link-red class 带破折号。所以在 jsx 你需要使用 styles['link-red'].

Next.js目前没有自动配置camelCase，但您可以关注this discussion了解更多详情

Sass 在 NextJS 中编译后样式抛出未定义

Sass style throws undefined after compilation in NextJS

css

sass

typescript

tsx

next.js