javascript - Particle-react-js 并没有填满整个 Web 应用程序。只有一部分，我该怎么办？

Question

particle-react-js 并没有填满整个屏幕，只是其中的一部分。当我将它包装在一个 ID 中并给出 id height:100% 时，它无法正常工作。我正在使用 AWS Amplify 使用 React 框架创建 Web 应用程序。这就是问题的样子：https ://imgur.com/a/LjXXKlw 。我给粒子组件提供了particle-js Id。这是 id 在我的 CSS 中的外观：

#particles-js{
  height:100%;
}

我的代码是：

import React, { Component } from 'react';
import Amplify, { Interactions, Storage } from 'aws-amplify';
import { ChatBot, AmplifyTheme } from 'aws-amplify-react';
import { withAuthenticator, AmplifySignOut, SignOut } from '@aws-amplify/ui-react';
//import {withAuthenticator} from 'aws-amplify-react';
import Particles from 'react-particles-js';


import awsconfig from './aws-exports';
import './App.css';
import aws_exports from './aws-exports';


Amplify.configure(aws_exports);
Amplify.configure(awsconfig);
Amplify.configure({
  Auth: {
    identityPoolId: '#######',
    region: 'ap-southeast-1'
  },
  Interactions: {
    bots: {
      "#####": {
        "name": "#####",
        "alias": "$LATEST",
        "region": "#####",
      },
    }
  }
});

Storage.configure({
customPrefix: {public:''}
})

// Imported default theme can be customized by overloading attributes
const myTheme = {
  ...AmplifyTheme,
  color:'#00f0fc',
  sectionHeader: {
    ...AmplifyTheme.sectionHeader,
    backgroundColor: '#ff6600'
    
  }
};

let params = {
  particles: {
    number: {
      value: 40,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ["#c311e7", "#b8e986", "#4dc9ff", "#ffd300", "#FF7E79"]
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 5
      },
      image: {
        src: "img/github.svg",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.9,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.5,
        sync: false
      }
    },
    size: {
      value: 8,
      random: true,
      anim: {
        enable: false,
        speed: 30,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 80,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 3,
      direction: "none",
      random: false,
      straight: false,
      out_mode: "bounce",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "repulse"
      },
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: 150,
        duration: 1
      },
      push: {
        particles_nb: 3
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
};


class App extends Component {

  state = {
    imageName: "",
    imageFile: "",
    response: ""
  };

  uploadImage = () => {
    //SetS3Config("####", "protected");
    Storage.put(this.upload.files[0].name,
                this.upload.files[0],
                { contentType: this.upload.files[0].type },
                )
      .then(result => {
        this.upload = null;
        this.setState({ response: "Success, uploading file!" });
      })
      .catch(err => {
        this.setState({ response: `Unable to upload file: ${err}` });
      });
  };

  
  handleComplete(err, confirmation) {
    if (err) {
      alert('Bot conversation failed')
      return;
    }

    alert('Success: ' + JSON.stringify(confirmation, null, 2));
    return '######';
  }

  render() {
    return (
  
      <div className="App">
        

     
        <header className="App-header">
          <h1 className="App-title">Welcome to SuppBot!</h1>
          <h2>L######</h2>
          <h2>####</h2>
        </header>
        
        

        <ChatBot
          title="#####"
          theme={myTheme}
          botName="#####3"
          welcomeMessage="#####"
          //onComplete={this.handleComplete.bind(this)}
          
          clearOnComplete={false}
          conversationModeOn={false}
        />

     <div id="particles-js" ><Particles params={params} /></div>

      </div>
    );
  }
}
export default withAuthenticator(App, {includeGreetings:true});

标签： javascriptreactjsamazon-web-servicesaws-amplify