In next.js, how do I apply both a custom css class and a bootstrap class to an element

user_5618611 0
Viewed 952

The css class is imported and then applied to the element as shown below;

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

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

Individually they work but when applied as shown above the styles are not applied to the element.

next.js css
1 Answers

Use a template literal, including your dynamic class name via interpolation:

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

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

Alternatively, use a helper like clsx:

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

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