nextjs用静态类名添加动态类名[重复]

Posted 2023-02-22

【中文标题】nextjs用静态类名添加动态类名[重复]

【英文标题】：nextjs add dynamic classNames with static classNames [duplicate]

【发布时间】：2021-10-25 11:57:18

【问题描述】：

我刚刚开始使用 nextjs。要动态添加 CSS 类名，这就是我正在做的事情

<div className=selected? [styles.list,styles.half].join(" ") : styles.list>

现在styles.list 在 if/else 中都是通用的。

我试过了

<div className=styles.list className=selected? styles.half : ''>

但这表明

JSX elements can not have multiple atrributes with same name

有什么方法可以达到同样的效果吗？

【问题讨论】：

错误是不言自明的，你不能有多个同名的属性，在这种情况下className。

是的，但是有什么办法可以做到吗？

可能是这样的？ className=`$styles.list $selected ? styles.half : ''`

【参考方案1】：

根据我的评论，您可以尝试以下语法：

className=`$styles.list $selected ? styles.half : ''`

【参考方案2】：

我认为这对你有用

<div className=`$styles.list $selected? styles.half : ''`>