How to add multiple classNames to nextjs elements

I have an unordered list element that looks like this:

     <ul className={styles["projects-pd-subdetails-list"]}>
        { => (
             className={styles["projects-pd-text projects-pd-subdetail"]}

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?

61 thoughts on “How to add multiple classNames to nextjs elements”

Leave a Comment