在 css 模塊 class 名稱上使用變量值

Question

我正在嘗試使用 class 名稱中的變量和 nextjs 中的 css 模塊，但我很難弄清楚正確的語法。

我的變量來自 api：

const type = red

我是如何做到的：

<div className={` ${styles.background} ${styles.--type}`}></div>

我期望的結果：

<div className={` ${styles.background} ${styles.--red}`></div>

有辦法嗎？

Answer 1

不確定您要達到的目標。

一種解決方案可能是：

const type = 'red';

<div className={`${styles.background} ${styles.type}`}></div>

但是，如果您想使用 BEM 和--表示法。 您可能必須切換到括號表示法。

const type = '--red';

<div className={`${styles.background} ${styles[type]}`}></div>