如何向 nextjs 元素添加多个 className

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 中使用className。

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

或者，如果你不想使用驼峰命名法

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

让我知道它是否有效。

另一种使用clsx库使用多个类的便捷方法。好的部分clsx是 - 您还可以处理条件类名。

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

Answer 2

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

["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]

// somewhere in the code
<li className={[...listClasses, styles.projects_pd_outline].join(" ")}>
   {sub}
</li>

Answer 3

正如我最初的评论中所述，我没有使用过 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"]}`}