如何在React网站中设置粒子作为背景？

Question

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Contact extends Component {
  get show() {
    return this.props.activeSection === "contact";
  };

    render() {
      if(this.show) {

        return (
          <div className='contact'>
        <h1>kontakt!</h1>
        </div>
      );
    } else {
      return null;
    };
    };
  };

class Skills extends Component {
  get show() {
    return this.props.activeSection === "skills";
  };

    render() {
      if (this.show) {

        return (
          <div className='intro skills'>
          <h1>skills</h1>
        </div>
      );
    } else {
      return null;
    };
    };
  };

  class Projects extends Component {
    get show() {
      return this.props.activeSection === "projects";
    }


      render() {
        if(this.show) {

          return (
            <div className='intro projects'>
          <h1>Projects</h1>
          </div>
        );
      } else {
        return null;
      }
      }
    }

class About extends Component {
  get show() {
    return this.props.activeSection === "about";
  };

    render() {
      if (this.show) {

        return (
          <div className='intro about'>
         <h1>about</h1>
         <p>
            Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
         </p>
        </div>
      );
    } else {
      return null;
    };
    };
  };

class Start extends Component {
    get show() {
        return this.props.activeSection === "start";
      };

    render() {
    if (this.show) {

        return (
            <div className='intro start'>
              <h1>Name Surname</h1>
              <p>Content Content Content Content Content Content </p>
              <h2>Content Content Content Content Content Content Content Content </h2>
          </div>
      );
    } else {
        return null;
    };
    };
  };

const Main = ({ activeSection }) => (
    <React.Fragment>
      <div className="container border">
          <Start activeSection={activeSection}/>
          <About activeSection={activeSection}/>
          <Skills activeSection={activeSection}/>
          <Projects activeSection={activeSection}/>
          <Contact activeSection={activeSection}/>
        </div>
    </React.Fragment>
);

const Buttons = ({ onToggle }) => (

  <div className="buttons">
          <button name='start' onClick={onToggle}>Start</button>
          <button name='about' onClick={onToggle}>About</button>
          <button name='skills' onClick={onToggle}>Skills</button>
          <button name='projects' onClick={onToggle}>Projects</button>
          <button name='contact' onClick={onToggle}>Contact</button>
        </div>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: "start",
    };


    this.handleToggleSection = this.handleToggleSection.bind(this);

  };

  handleToggleSection(e) {
    const {name} = e.target;
    this.setState(() => ({
      activeSection: name
    }));
  };

  render() {
    return (
      <div className="App">
        <Buttons onToggle={this.handleToggleSection}/>
        <Main activeSection={this.state.activeSection}/>
      </div>
    );
  };
};

class Parti extends Component {
    render() {
        return (
            <Particles 
              params={{
                    particles: {
                        value: 150,
                        density: {
                            enable: true,
                            value_area: 200
                        }
                        }
                    }
                }
              style={{
                width: '100%',
                backgroundColor: 'red',
                position: 'absolute'
              }}
            />
        );
    };
};


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-family: 'Signika', sans-serif;
}

body {
  background-color: lightblue;
  max-height: 100vh;
  background-color: red;
}

.App {
  display: flex;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.border {
  border: 1px solid red;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10%;
}

.buttons button {
  border: 1px solid red;
  padding: 0.4em;
  margin: 0 0 30px 0;
}

.intro {
  width: 70%;
  text-align: center;
  position: absolute;
  left: 25%;
  top: 10%;
  border: 1px solid green;
}

.start {
  -webkit-animation: color-change 5s infinite;
  -moz-animation: color-change 5s infinite;
  animation: color-change 5s infinite;
  top: 15%;
}

@-webkit-keyframes color-change {
  0% {
    color: #000000;
  }
  50% {
    color: #ffff;
  }
  100% {
    color: #000000;
  }
}
@-moz-keyframes color-change {
  0% {
    color: #000000;
  }
  50% {
    color: #ffff;
  }
  100% {
    color: #000000;
  }
}
@keyframes color-change {
  0% {
    color: #000000;
  }
  50% {
    color: #ffff;
  }
  100% {
    color: #000000;
  }
}

.intro * {
  padding: 0.7em;
  font-size: 200%;
}

.skills h1 {
  padding-bottom: 2em;
}

.contact {
  text-align: center;
  border: 1px solid green;
  position: absolute;
  width: 70%;
  text-align: center;
  position: absolute;
  left: 30%;
  top: 10%;
  border: 1px solid green;
}

.contact h1 {
  padding: 0.7em;
  font-size: 200%;
}

.contact img {
  margin: 2em 2em 2em 2em;
}

.show {
  display: block;
}

.hide {
  display: none;
}

我的粒子反应有问题。我想在我的网站中将粒子作为背景，但某些方法无效。我安装了react-particles，它正在运行，但是在App Component渲染中，当我添加粒子时，我拥有所有内容，但是效果不好。有什么想法如何修复吗？ 我应该在渲染中进行哪些更改：

render() {
    return (
      <div className="App">
        <Buttons onToggle={this.handleToggleSection}/>
        <Main activeSection={this.state.activeSection}/>
      </div>
    );