没有出现React-Particles-js背景

Question

我遇到的问题与How to set React-Particles-Js to background using React?类似，但是将建议的样式设置为画布似乎无效，或者我理解不正确。

App.js：

import React from 'react';
import './App.css';
import Navbar from './Layout/Navbar.js';
import Background from './Layout/Background.js';

function App() {
  return (

      <Background/>,
      <Navbar/>
  );
}

export default App;

App.css：

body{
  margin: 0;
  padding: 0;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  background: linear-gradient(to right, rgba(76, 0, 130, 0.527), rgba(93, 0, 130, 0.74));
}

Background.js：

import React from 'react';
import Particles from 'react-particles-js';

const bgStyle = {
        particles: {
            number: {
                value: 150,
                density: {
                    enable: true,
                    value_area: 800
                }
            }
        }
}

function Background() {
    return <canvas class="particles-js-canvas-el" width="750" height="1200" style="width: 100%; height: 100%;"><Particles params={bgStyle}/></canvas>
}

export default Background;

Background.css：

canvas {
    position: fixed;
    right: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }