Estoy tratando de hacer un control deslizante usando la barra de reacción, y cada diapositiva dentro de la barra deslizante de reacción es una tarjeta con un fondo diferente (un degradado lineal). He estado tratando de darle a cada tarjeta un fondo diferente pero no funciona (no aparece nada, cuando inspecciono el elemento es como si nunca hubiera aplicado este estilo)

así que aquí está mi matriz de gradientes lineales (js)

 const gradients = [ "linear-gradient(135deg, #D8D6FF 0%, #FEF0F9 100%)", "linear-gradient(135deg, #FEF0F9 0%, #CEE7FD 100%)", "linear-gradient(135deg, #CEE7FD 0%, #DCF7F5 100%)", "linear-gradient(135deg, #DCF7F5 0%, #EBF8DE 100%)", "linear-gradient(135deg, #EBF8DE 0%, #FFEBD8 100%)", "linear-gradient(135deg, #EBF8DE 0%, #FFEBD8 0.01%, #F7D8E7 100%)" ];

este es mi control deslizante de reacción, traté de usar el índice para que coincida con la matriz de gradientes para que cada tarjeta tenga su respectivo gradiente lineal (js)

 <Slider {...settings} className={styles.slider}> {miniProjects.map((project, i) => ( <div className={styles.card} style={{background: gradients[i]}}> {project.name} </div> ))} </Slider>

y solo porque sí, aquí está mi estilo para el control deslizante y la tarjeta (css)

 .slider { width: auto; display: flex; flex-direction: row; align-items: center; justify-content:space-between; margin-left: 175px; } .card { width: 400px !important; height: 400px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; }

No sé si se trata de algún tipo de problema de reacción o mi sintaxis es incorrecta en el archivo javascript, por lo que se ignoran los gradientes lineales.