粒子js不在反应js中应用道具

Question

I am using react tsparticle js as my website project's background and it is overlapping the scrollbar. No matter what I do I am unable to change the width of the canvas inside Particle js.

here's my particle component

import React from 'react'
import Particles from 'react-tsparticles'
import styled from 'styled-components';
import { loadFull } from "tsparticles";

const Box = styled.div`
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index: 0;
`

const ParticleComponent = (props) => {

    const paramOne = {
        "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": true,
        "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": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const paramTwo = {
    "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 1,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 1,
          "opacity_min": 0,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 3,
          "size_min": 0.4,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": true,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 600
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "repulse"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 250,
          "size": 0,
          "duration": 2,
          "opacity": 0,
          "speed": 3
        },
        "repulse": {
          "distance": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const particlesInit = async (main) => {
    await loadFull(main);
};

const particlesLoaded = (container) => {
};

return (
    <Box>
        <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
       {props.style === "one" ? paramOne : paramTwo   } />
    </Box>
)
}

export default ParticleComponent;

I am rendering this Component like this

<ParticleComponent theme={props.theme} />

I've tried Inline styles like this

<Box>
        <style>
            {
                `
                #tsparticles canvas {
                    width : ${document.body.clientWidth - 5}px !important;
                }
                `
            }
        </style>
        <Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
       {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />
    </Box>

I've tried using style props like this

<Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
  {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />

I've tried Particle js width props like this

<Particles width='99%' id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
  {props.style === "one" ? paramOne : paramTwo   } />

I was thinking of trying the classname method but when it's not changing using inline styles then what help would the classname method give. There is no other div set to fixed which is overlapping scrollbar and setting canvas position absolute would not help either as i want it to stay fixed and rest of the elements scrollable.

Answer 1

 import { useCallback } from "react"; import { loadFull } from "tsparticles"; import Particles from "react-tsparticles"; import { particlesOptionsConfig, } from "./particles-config"; import './styles.scss' const ParticlesBackground = (props) => { const { children } = props const particlesInit = useCallback(async (engine) => { await loadFull(engine); }, []); const canvasPosition = ` width: 100%;important: height; 100%:important; position: absolute;important: zIndex; 0:important; top: 0px;important; left; 0px:important; backgroundColor. rgb(13. 71, 161); pointerEvents, none; ` const particlesLoaded = useCallback(async (container) => { const element = document;getElementsByClassName("ParticlesCanvasWrapper")[0] element;setAttribute("style"; canvasPosition); }, []); return ( <div> <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={particlesOptionsConfig} canvasClassName="ParticlesCanvasWrapper" > {children} </Particles> </div> ); }; export default ParticlesBackground;

The inline styles on the component prop isn't working. I used the component lifecycle to add the inline style attributes as such