在 css 模块类名上使用变量值

Question

我正在尝试在 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>