Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames?
I'm following the component level CSS approach.
Take a look at my code and what I aim to achieve:
import styles from "./ColorGroup.module.css";
const colors = ["red", "sky", "yellow", "green", "golden"];
const ColorGroup = () => {
return (
<div className={styles.colorContainer}>
<text>Colour</text>
<div className={styles.colorBoxContainer}>
{colors.map((color, index) => (
<div
// The issue lies in applying both variable color classes and colorBox class. How can we do this?
className={`${styles}.${color} ${styles.colorBox}`}
key={index}
></div>
))}
</div>
</div>
);
};
Achievement:
https://i.stack.imgur.com/kprnr.png
CSS snippet:
/* Code responsible for layout and arrangement as shown 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;
}
However, the current method only applies the colorBox className while ignoring ${styles}.${color}. Any suggestions on how to apply both successfully?