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

【问题标题】：In next.js, how do I apply both a custom css class and a bootstrap class to an element在 next.js 中，如何将自定义 css 类和引导类应用于元素
【发布时间】：2020-06-16 22:44:08
【问题描述】：

导入css类，然后应用到元素上，如下图；

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

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

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

【问题讨论】：

标签： css next.js

【解决方案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")}>

【讨论】：