首页 > 解决方案 > 带有 css 模块的 NextJS 条件类给出控制台警告

问题描述

我正在处理 NextJS 项目,我需要在一个元素上有 2 个类,但其中一个是有条件地添加的。我正在使用css模块。

我知道如何添加 2 个类 -className={`${styles.class1} ${styles.class2}`}这很好用,但是当我想有条件地添加 class2 时,我会在控制台中收到警告:

Warning: Received `false` for a non-boolean attribute `className`.

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.

这是我的代码:

import styles from './styles.module.css'

<div className={`${styles.class1} ${isShowLinks ? styles.class2 : undefined}`}>
  Code here
</div>

我也尝试使用 {isShowLinks && styles.class2} 但我在控制台中收到相同的警告。

我做错了什么?

标签: cssreactjsnext.js

解决方案


推荐阅读