javascript - 如何使用类名重写这个条件 css？

Question

在反应组件中，我正在使用 css 模块，并且我得到了这个工作正常的条件 css，但我想使用类名库对其进行重构。

className = { `${active ? styles.activeLabel : styles.notActiveLabel} 
${weight === 'bold' ? styles.bold : ''}`}

所以我尝试了这个，但我收到错误消息，说 active 总是返回 false。

className={classnames({styles.activeLabel: !!active}, {styles.bold: weight === 'bold'})}

我也尝试了styles.activeLabel：active === true，但我收到了另一条错误消息。基本上我想当 active prop 为 true 时应用 activeLabel 类，如果 active 为 false 则应用 notActiveLabel 类。如何使用类名完成此操作？

score 2 · Accepted Answer

JS Object 上的 Keys 必须是字符串或数字，不能设置如下键：

// this does not work
const object = { key: 'value' }
const object2 = { object.key: true }

因此，当您需要获取具有动态名称的键时，您必须使用方括号

// this works
const object = { key: 'value' }
const object2 = { [object.key]: true }

尝试执行以下操作：

className={classnames({ [styles.activeLabel]: !!active}, {[styles.bold]: weight === 'bold'})}

1 回答 1