El componente fijo es el menú desplegable que tiene una clase fija y un índice z de 50.
Actualmente, tiene un fondo blanco y quiero cambiarlo para que tenga el mismo fondo que el cuerpo. ¿Por qué no uso fondo transparente? porque mostrará el contenido a continuación.
nota: el fondo del cuerpo es un degradado lineal

botnav

 <div id="botnav" className={`${isOpen ? 'h-40' : 'h-0'} px-10 md:hidden flex flex-col justify-center transition-all duration-300 ease fixed bg-white z-50 w-full `}> { menu.map((item, index) => { return ( <Link href={item.link} key={index} className=""> <a onClick={toogleMenu} className={`${router.pathname == item.alias ? 'text-black font-bold' : 'text-grey'} overflow-hidden transition-none sm:text-primary w-full py-1 text-black font-bold items-center justify-center border-none `}> {item.name} </a> </Link> ) }) } </div>

cuerpo

el cuerpo es una etiqueta de cuerpo regular y configuré el bg con efecto de uso

 useEffect(() => { const bodybg = { '/': 'bg-grad-lblue', '/diary': 'bg-grad-lred', '/askme': 'bg-grad-lyellow', '/contact': 'bg-grad-leftblue' } document.body.className = bodybg[router.pathname] }, [router.pathname])

clase de fondo

 .bg-grad-lred { background: linear-gradient(302.02deg, #FFB1B5 -43.05%, #FFFFFF 75.37%); } .bg-grad-lblue{ background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%); } .bg-grad-lyellow{ background: linear-gradient(127.05deg, #FFD085 -4.39%, #FFFFFF 73.98%); } .bg-grad-leftblue{ background: linear-gradient(77.58deg, #D4E7FE 1.34%, #FFFFFF 100%); }