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

Question

与标题差不多。。

我在_app.js中声明了我的全局样式.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中全局加载它有什么意义？

Answer 1

尝试将该类仅用作字符串

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

您的bundler将把css文件连接到最终的bundle，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>