How can I put component inside the Particle.js?-CodePudding

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

CodePudding user response：

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