在 css 模块 class 名称上使用变量值

Question

我正在尝试在 nextjs 的 css 模块中使用 class 名称中的变量，但我很难找到正确的语法。

我的变量来自 api:

const type = red

我是怎么做到的：

我期望的结果：

有办法吗？

Answer 1

不确定您要实现的目标。

一个解决方案是：

const type = 'red';

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

但是如果你想使用 BEM 和 -- 符号。您可能需要切换到括号表示法。

const type = '--red';

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

using a variable value on css modules class name