Intenté envolver la Particle alrededor del componente pero no funciona.
import React from "react"; import { render } from "react-dom"; import Particles from "./Particles"; import "./index.css"; import Form from "./form"; const styles = { root: { fontFamily: "sans-serif", textAlign: "center", height: "100%", background: "#222", display: "flex", justifyContent: "center", alignItems: "center" } }; const App = () => ( <div style={styles.root}> <Particles> <Form /> </Particles> </div> ); render(<App />, document.getElementById("root"));Este es el enlace de codesandbox recreado: https://codesandbox.io/s/particle-js-background-forked-woypk?file=/src/index.js:0-519
Actualicé su CodeSandbox aquí: https://codesandbox.io/s/particle-js-background-forked-fsvhe?file=/src/form.js
Actualicé el componente de partículas, ya que estaba usando un paquete obsoleto ( react-particles-js ).
El componente de partículas no admite nada en el interior, simplemente lo coloca dentro de otros componentes y usa CSS para colocarlo correctamente.
react-tsparticles , el componente de partículas actualizado, está configurado de forma predeterminada en pantalla completa, pero en las opciones de ejemplo lo configuré en false para que esté contenido solo en el componente Form