如何将多个类名添加到 nextjs 元素答案

【问题标题】：How to add multiple classNames to nextjs elements如何将多个类名添加到 nextjs 元素
【发布时间】：2021-04-30 21:21:54
【问题描述】：

我有一个如下所示的无序列表元素：

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

使用普通的 React 元素，我可以像这样为 li 元素应用多个类：

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

但是，像我在 nextjs 中那样使用空格意味着样式会被忽略。如何解决此问题并在此处正确说明我的 li 元素的两个类名？

【问题讨论】：

我没有使用过next.js，但查看您的代码，我认为styles 是某种映射，正确的语法类似于：className={styles["projects-pd-subdetail"] + " " + styles["projects-pd-text"]}跨度>
是的，雅各布，这行得通。您可以将其放在答案形式而不是评论中吗？我想选择您的回答作为正确答案，这样您就可以得到认可。

标签： javascript css reactjs next.js

【解决方案1】：

你可以像这样使用多个className

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

但是有一个问题。它可能会引发错误（我猜，不确定）。你可以在你的 css 类名中使用camelCase。

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

或者，如果你不想驼峰式

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

让我知道它是否有效。

【讨论】：

这会引发错误，因为它认为我在第一次插值中从 styles.projects 中减去变量 pd 和 text，在第二次插值中从 styles.proejcts 中减去变量 pd 和 subdetail。 Jacob Smit 上面的评论虽然有效。
@JevonCochran 这就是为什么我建议使用camelCase 类名。

【解决方案2】：

正如我在原始评论中所说，我没有使用 Next.js。

样式似乎是某种地图，即：

const styles = {
    "projects-pd-subdetails-list": "Class Name A",
    "projects-pd-text": "Class Name B",
    "projects-pd-subdetail": "Class Name C"
}

这意味着通过使用类似于styles["projects-pd-text projects-pd-subdetail"] 的行，您正在尝试检索不存在的键"projects-pd-text projects-pd-subdetail" 的值。

我建议从地图中单独检索值，然后将它们与您选择的字符串连接连接在一起。

className={styles["projects-pd-subdetail"] + " " + styles["projects-pd-text"]}

// OR

className={`${styles["projects-pd-subdetail"]} ${styles["projects-pd-text"]}`}

【讨论】：

【解决方案3】：

一个简单的数组连接就足够了。

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

结果："class1 class2 class3"

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

或将其保存为变量以供多次使用

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

【讨论】：

【解决方案4】：

clsx 通常用于有条件地应用给定的类名。

https://www.npmjs.com/package/clsx

【讨论】：

【解决方案5】：

这就是它在我的样式组件中的工作方式

<ul>
<li className={router.pathname == "/" && styles.active}><Link href="/">Home</Link></li>
<li className={router.pathname == "/about" && styles.active}><Link href="/about">About</Link></li>
<li className={router.pathname == "/contact" && styles.active}><Link href="/contact">Contact</Link></li>
<li><Link href="/404">404</Link></li>
</ul>

【讨论】：