Tengo una imagen en la que la clase CSS de la imagen debe cambiarse dinámicamente. Se pasa dinámicamente desde este objeto desde la clave "tamaño":
export const decals = [ { label: 'Nikola Tesla', img: `/images/decals/tesla.svg`, size: `decalMed` }, { label: 'Tattoo Mom Heart', img: `/images/decals/ARF149.svg`, size: `decalSm`}En otro componente aquí:
import styles from ./Shirt.module.css'; <img key={decals[decal].label} src={decals[decal].img} alt={decals[decal].label} className={`${styles}.${decals[decal].size}`}/>El className= es el problema. He intentado tantas maneras diferentes de pasar esta clase.
Capturé esto (calcomanías[calcomanía].tamaño) en una variable antes de pasar a la etiqueta de la imagen. Intenté usar la etiqueta de estilo en lugar de className y creé una variable para contener la clase. He cambiado alrededor de los corchetes. Intenté pasarlo a un div externo.
Nada parece funcionar.
Me pregunto si alguien puede darle una pista a un novato en reaccionar. ¡Gracias!
si no me equivoco, está tratando de administrar dinámicamente las clases que pasan al elemento de imagen. Para hacerlo, le recomiendo que use "nombres de clase" https://www.npmjs.com/package/classnames
Con este paquete, puede controlar classNames con variables en su componente. Intentaré explicar el uso con un pequeño ejemplo.
Su archivo de estilo como
.yourParentClass { &.decalMedClass { // your styles for this class } &.decalSmClass { // your styles for this class } }su archivo componente como
import Style from '../style.scss'; // Your classes var classNames = require('classnames/bind'); // classname package const cx = classNames.bind(Style); // your code render() { return ( <img className={ cx({ yourParentClass: true, decalMedClass: this.state.sizeMed, decalSmClass: !this.state.sizeMed, }) } /> ); }Básicamente, estás diciendo qué clase va a estar activa. Por favor, no se quede con mi ejemplo, hay buenos ejemplos en la página de npm.