Hice una baraja de cartas, donde una carta está "actualmente seleccionada". Las imágenes de las cartas restantes se vuelven borrosas. Logro esto usando un accesorio "deshabilitado" pasado a mi componente de tarjeta de proyecto y los siguientes estilos condicionales que se pasan a mi GatsbyImage:
let blurAmount = disabled ? '3px' : '0px'; const imgStyle = { imagePosition: "center", borderRadius: "2%", filter: `blur(${blurAmount})` } const staticImage = ( <GatsbyImage image={data.preview[0].gatsbyImageData} alt={data.preview[0].description} imgStyle={imgStyle}/> )El estado de "carta actual" se controla en el componente principal que recorre los datos consultados y crea la baraja de cartas. En el primer render, esto funciona como se esperaba, pero cuando cambio el índice actual con mi componente de alternar, las imágenes borrosas permanecen borrosas y la imagen clara permanece clara. Registré el valor de blurAmount arriba y cambia apropiadamente. Esto me lleva a creer que una vez que se crea un componente GatsbyImage a partir de algunos gatsbyImageData, es "inmutable". ¿Es correcto este entendimiento? ¿Hay alguna solución (además de almacenar imágenes borrosas en mi CMS)?
Aquí hay una imagen del error. La tarjeta actual es la segunda, pero aún está borrosa y la imagen de la primera tarjeta aún es clara. https://imgur.com/a/24dXtr7
Le sugiero que rehaga el componente y pase blurAmount como accesorio y use useState para almacenar el valor, y luego con el gancho useEffect vuelva a renderizar cada vez que cambie el valor
useEffect(() => { // save in state }, [blurAmount]);