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

Question

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

      <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 元素的两个类名？

原文由 Jevon Cochran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如我最初的评论中所述，我没有使用过 Next.js。

看起来好像 styles 是某种地图，即：

 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"]}`}

原文由 Jacob Smit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以像这样使用多个 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>

让我知道它是否有效。

原文由 Robin 发布，翻译遵循 CC BY-SA 4.0 许可协议