NextJS是否可以将模块特定样式和全局样式相结合

Question

例如，我如何用类"模块"；根据模块特定css和类"；全局"；从全局css？

<p className={styles.module}>Hello World!</p>
<p className={global}>Hello World!</p>

我想是这样的：

<p> className={styles.module, global}>Hello World!</p>

Answer 1

是的，您可以将两者结合：

对于全局CSS，您可以将其添加到pages/_app.js文件中，如下所示：

import '../styles.css'

对于组件级CSS，您可以将其添加到组件文件中，如下所示：

import styles from './Component.module.css'

让我们想象一下，这些CSS文件的内容是：

/* style.css */
.classFromGlobalCSS {
color: white;
}

/* Component.module.css */
.classFromComponentCSS {
background-color: black;
}

然后在你的组件中，你可以使用它将两个来源的样式放在同一段上：

<p className={`classFromGlobalCSS ${styles.classFromComponentCSS}`}>
Hello World!
</p>

您可以找到有关内置CSS支持文档的更多信息。

Answer 2

最简单的方法是使用模板文字：

<p className={`${styles.module} ${global}`}>Hello World!</p>

对于更复杂的用法，可以使用clsx模块。

Answer 3

我使用的NextJS与Tailwind CSS可能会遇到同样的问题。

在我的例子中，我将classNames扩展为一个数组，并使用.join(' ')将它们合并为一个字符串。

<p className={[styles.module, global.text, 'px-3 py-3'].join(' ')}>Hello World!</p>