'How can I rewrite this conditional css using classnames?

In react component, I'm using css module and I got this conditional css that is working fine, but I would like to refactor it using classnames library.

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

So I tried this but I get error msg saying active will always return false.

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

I also tried styles.activeLabel: active === true, but I get another error message. Basically I want when active prop is true then apply activeLabel class, if active is false then apply notActiveLabel class. How can I accomplish this using classnames?

javascriptcssreactjssassclass-names


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions