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

Posted 2023-02-22

【中文标题】如何使用 _app.js (Next.js) 中声明的全局 css 文件中的 css 类

【英文标题】：How to use css class from global css file declared inside _app.js (Next.js)

【发布时间】：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 中全局加载它有什么意义那么呢？

【参考方案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>