I tried wrapping the Particle around the component but it does not work
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"));
This is the recreated codesandbox link: https://codesandbox.io/s/particle-js-background-forked-woypk?file=/src/index.js:0-519
I've updated your CodeSandbox here: https://codesandbox.io/s/particle-js-background-forked-fsvhe?file=/src/form.js
I've updated the particles component, since you were using a deprecated package (react-particles-js).
The particles component doesn't support anything inside, you just place it inside other components and use CSS to position it correctly.
react-tsparticles, the updated particles component, is by default set to full screen, but in the example options I've set it to false to be contained only in the Form component