Me gustaría establecer un fondo de partículas solo en una página de mi aplicación web. Use el siguiente código:

 import styles from "../styles/Page.module.css"; import Particles from "react-tsparticles"; const particlesOptions = { background: { color: { value: "transparent", }, }, fpsLimit: 120, interactivity: { events: { onClick: { enable: false, mode: "push", }, onHover: { enable: false, mode: "repulse", }, resize: true, }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40, }, push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, fullScreen: { enable: false, zIndex: 0 }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 150, enable: false, opacity: 0.5, width: 1, }, collisions: { enable: false, }, move: { direction: "top", enable: true, outMode: "out", random: false, speed: 3, straight: false, }, number: { density: { enable: true, area: 800, }, value: 30, }, opacity: { value: 0.9, }, shape: { type: "edge", }, size: { random: true, value: 3, }, }, detectRetina: true, } const Page = () => { return ( <div className={styles.page}> <Particles className={styles.particles} options={particlesOptions} /> </div> ); }; export default Page;

La página tiene 100vh (styles.page), he intentado establecer un nombre de clase para el componente Partículas de esta manera:

 .particles { position: absolute; right: 0; top: 0; left: 0; bottom: 0; z-index: 0; }

Pero no muestra las partículas, el fondo es rojo y las partículas están configuradas en blanco. También he intentado configurar el componente Partículas de esta manera:

 const Page = () => { return ( <> <Particles className={styles.particles} options={particlesOptions} /> <div className={styles.page}> </div> </> ); };

Pero esto todavía no funciona. También he intentado establecer la altura y el ancho al 100%. Por favor, ¿hay alguna manera de hacer que esto funcione?