如何使用在 _app.js (Next.js) 中声明的全局 css 文件中的 css class

Question

和标题差不多。。

我在 _app.js 中声明了我的全局styles.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 如下：

import '../public/styles.css'

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

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

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

Answer 1

尝试只使用 class 作为字符串

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

Answer 2

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

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