javascript - 如何将多个类名添加到 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 正确考虑两个类名元素在这里？

Answer 1

您可以使用多个 className像这样

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

但有一个问题。它可能会引发错误(我猜，不确定)。您可以使用 camelCase在你的 CSS 类名中。

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

或者，如果您不想使用 camelCase

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

让我知道它是否有效。