Multiple variable className in next js

Question

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

Here's my code and what I want to do:

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
            // variable color class is not get applied, only colorBox is applied, I want both
            className={`${styles}.${color} ${styles.colorBox}`}
            key={index}
          ></div>
        ))}
      </div>
    </div>
  );
};

Goal:

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 ?

iamhuynq · Accepted Answer · 2022-07-27 06:59:14Z

1

You should use bracket

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

answered Jul 27, 2022 at 6:59

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pnxdxt · Accepted Answer · 2022-07-27 05:11:06Z

1

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>

answered Jul 27, 2022 at 5:11

pnxdxt

1606 bronze badges

1 Comment

Abhishek Jha Over a year ago

Thanks, this approach didn't come to my mind :D But do you know how to apply those classNames, if we want to do something more than just backgroundColor ?

Collectives™ on Stack Overflow

Multiple variable className in next js

Here's my code and what I want to do:

Goal:

CSS code:

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here's my code and what I want to do:

Goal:

CSS code:

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related