如何使用 _app.js (Next.js) 中声明的全局 css 文件中的 css 类答案

【问题标题】：How to use css class from global css file declared inside _app.js (Next.js)如何使用 _app.js (Next.js) 中声明的全局 css 文件中的 css 类
【发布时间】：2021-03-30 14:02:45
【问题描述】：

和标题差不多..

我在 _app.js 中声明了我的全局 styles.css，如下所示：

import '../public/styles.css'

然后在页面 header.js (/components/header.js) 中，我正在使用上述全局 css 文件中的 .buttonPrimary 类，如下所示：

          <a
            href={`/api/auth/signin`}
            className={buttonPrimary}    // THIS
            onClick={(e) => {
              e.preventDefault()
              signIn()
            }}
          >
            Sign in
          </a>

但它会抛出该类不存在的错误。我知道我可以在同一个全局 css 文件的页面顶部进行导入，但是在 _app.js 中全局加载它有什么意义那么呢？

【问题讨论】：

标签： css node.js reactjs next.js

【解决方案1】：

尝试只使用类作为字符串

 <a
  href={`/api/auth/signin`}
  className="buttonPrimary"
  onClick={(e) => {
    e.preventDefault()
    signIn()
  }}
>
  Sign in
</a>

您的捆绑器会将 css 文件连接到最终捆绑包，然后 react 会渲染。结果我们得到了html：

<a href="/api/auth/signin" class="buttonPrimary">Sign in</a>

【讨论】：

【解决方案2】：

您需要将 className 作为字符串传递

<a
 href={`/api/auth/signin`}
 className="buttonPrimary"
 onClick={(e) => {
  e.preventDefault()
  signIn()
 }}
 >
 Sign in
</a>

【讨论】：