En el componente de reacción, estoy usando el módulo css y obtuve este css condicional que funciona bien, pero me gustaría refactorizarlo usando la biblioteca de nombres de clase.
className = { `${active ? styles.activeLabel : styles.notActiveLabel} ${weight === 'bold' ? styles.bold : ''}`}Así que probé esto, pero recibo un mensaje de error que dice que activo siempre devolverá falso.
className={classnames({styles.activeLabel: !!active}, {styles.bold: weight === 'bold'})}También probé styles.activeLabel: active === true, pero recibo otro mensaje de error. Básicamente, quiero que cuando el accesorio activo sea verdadero, aplique la clase activeLabel, si el activo es falso, aplique la clase notActiveLabel. ¿Cómo puedo lograr esto usando nombres de clase?
Las claves en el objeto JS deben ser una cadena o un número, no puede configurar una clave como:
// this does not work const object = { key: 'value' } const object2 = { object.key: true }Entonces, cuando necesite obtener una clave con un nombre dinámico, debe hacerlo con corchetes
// this works const object = { key: 'value' } const object2 = { [object.key]: true }Intenta hacer algo como:
className={classnames({ [styles.activeLabel]: !!active}, {[styles.bold]: weight === 'bold'})} Referencias:
Varios classNames con módulos CSS y React
¿Cómo creo una clave dinámica para agregarla a una variable de objeto de JavaScript?