Tengo una aplicación nextjs en la que quiero dar un color de fondo diferente a las tarjetas en relación con su categoría.

Intenté esto:

tarjeta.js

 import { React, useEffect } from "react" import Link from "next/link" import NextImage from "./image" const animColor = "#FF006E"; const decorColor = "#FFBE0B"; const illuColor = "#3A86FF"; const Card = ({ article, categories }) => { useEffect(() => { const overlay = document.getElementById("overlay"); article.attributes.categories.data.forEach(category => { console.log(category.attributes.slug) if (category.attributes.slug === "animation") { overlay.style.backgroundColor = animColor; } if (category.attributes.slug === "decor") { overlay.style.backgroundColor = decorColor; } if (category.attributes.slug === "illustrations") { overlay.style.backgroundColor = illuColor; } }); }, []); return ( <Link href={`/article/${article.attributes.slug}`}> <a className="hover:no-underline"> <div className="card relative grid mb-3 md:mb-0"> <div className="media"> <NextImage image={article.attributes.image} /> </div> <div id="overlay" className="overlay-color"></div> <div className="card-body flex items-end justify-center pb-5"> <p className="text-xl px-2 uppercase text-center text-white"> {article.attributes.title} </p> </div> </div> </a> </Link> ) } export default Card

artículos.js

 import React from "react" import Card from "./card" const Articles = ({ articles, categories}) => { return ( <> <div className="md:grid grid-cols-3 gap-5 justify-center place-content-center"> {articles.map((article, i) => { return ( <Card article={article} categories={categories} key={article.attributes.slug} /> ) })} </div> </> ) } export default Articles

Podría complicar la tarea más de lo que realmente es, pero estoy un poco perdido en mi cabeza. Intento capturar la categoría de cada tarjeta y si category.slug === [cada categoría], entonces cambia el estilo backGroundColor.

Con este código cambia solo el color de la primera carta. Supongo que hay un error en el proceso de iteración que elegí.

¿Alguna idea para resolverlo y tal vez hacerlo mejor?