How to add multiple classNames to nextjs elements

Question

I have an unordered list element that looks like this:

     <ul className={styles["projects-pd-subdetails-list"]}>
        {detail.subdetails.map((sub) => (
          <li
             className={styles["projects-pd-text projects-pd-subdetail"]}
          >
            {sub}
          </li>
        ))}
     </ul>

With a normal React element, I would be able to apply the multiple classes for the li element like this:

<li className="projects-pd-text projects-pd-subdetail">{sub}</li>

However, having a space like I do in nextjs means the styles are just getting ignored. How can I fix this problem and properly account for two classNames for my li element here?

Answer 1

You can use multiple className like this

<li className={`${styles.projects-pd-text} ${styles.projects-pd-subdetail}`}>
   {sub}
</li>

But there is a problem. It may throws an error(I guess, not sure). You may use camelCase in your css className.

<li className={`${styles.projectsPdText} ${styles.projectsPdSubdetail}`}>
   {sub}
</li>

or, if you don't want to camelCase

<li className={`${styles["projects-pd-text"]} ${styles["projects-pd-subdetail"]}`}>
       {sub}
</li>

Let me know if it works.

Answer 2

A simple array join should suffice.

["class1", "class2", "class3"].join(" ")

result: "class1 class2 class3"

<li className={[styles.projects_pd_text, styles.projects_pd_subdetail].join(" ")}>
   {sub}
</li>

Or save it as a variable for multiple uses

const listClasses = [styles.projects_pd_text, styles.projects_pd_subdetail].join(" ")