Multiple variable className in next js-CodePudding

How to apply multiple className in Next js, in which there are variable classsnames as well ?
I'm using

CSS code:


/* code for layout and arrangement above */

.colorBox {
  height: 36px;
  width: 36px;
}

.red {
  background-color: lightcoral;
}
.sky {
  background-color: skyblue;
}
.yellow {
  background-color: lightyellow;
}
.green {
  background-color: lightgreen;
}
.golden {
  background-color: greenyellow;
}

But this method is only applying the colorBox className and not doing anything for ${styles}.${color} . How to apply both ?

CodePudding user response：

You should use bracket

<div className={styles.colorBoxContainer}>
    {colors.map((color, index) => (
        <div
            className={`${styles[color]} ${styles.colorBox}`}
            key={index}
        ></div>
    ))}
</div>

CodePudding user response：

You can try to use the style object, it easier to use it with variables :

<div key={index} className={`${styles.colorBox}`} style={{ backgroundColor: color }} >
</div>