css - 在 next.js 中，如何将自定义 css 类和 Bootstrap 类同时应用于元素

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")}>