Next.js 中的條件類名

Question

很長一段時間第一次發帖，所以感覺有點不合時宜。 長話短說，我有點像泡菜。 我創建了一個導航菜單彈出，它根據 isActive 條件切換類名。 在 React 中工作得很好，但我不知道如何使用 classname={styles.selector syntax} 在 Next.js 格式中實現它，如果有人能建議我會很高興。 下面的代碼

<div className={isActive? "drop-menu menu-2": null}> <a>text</a></div>

Answer 1

使用clsx庫：

例子：

import clsx from 'clsx'

// ...

<div className={clsx(isActive ? "drop-menu menu-2" : null)}> <a>text</a></div>

// or

<div className={clsx(isActive && "drop-menu menu-2")}> <a>text</a></div>