在 next.js 中，如何将自定义 css 类和引导类应用到元素

Question

导入 css 类，然后将其应用到元素，如下所示；

import styles from "./Home.module.css";

<div className={(styles.collection, "card")}>

它们单独工作，但当如上所示应用时，样式不会应用于元素。

Answer 1

使用模板文字，包括通过插值的动态类名称：

import styles from "./Home.module.css";

<div className={`${styles.collection} card`}>

或者，使用如下助手clsx：

import c from 'clsx';
import styles from "./Home.module.css";

<div className={c(styles.collection, "card")}>