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 支持文档的更多信息。