如何使用类名重写此条件 css？

Question

在 React 组件中，我正在使用 css 模块，我得到了这个工作正常的条件 css，但我想使用 classnames 库重构它。

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

所以我尝试了这个，但我收到错误消息说活动总是 return false。

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

我也尝试了 styles.activeLabel: active === true，但我收到了另一条错误消息。基本上我想要当 active prop 为真时应用 activeLabel class，如果 active 为假则应用 notActiveLabel class。如何使用 classnames?

完成此操作

Answer 1

JS对象的Keys必须是字符串或数字，不能设置这样的key:

// 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'})}

参考文献：

How do I create a dynamic key to be added to a JavaScript object variable

如何使用类名重写此条件 css？

How can I rewrite this conditional css using classnames?

javascript

css

sass

class-names

reactjs