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

Question

我正在使用 react tsparticle js 作為我網站項目的背景，它與滾動條重疊。 無論我做什么，我都無法更改 Particle js 中 canvas 的寬度。

這是我的粒子組件

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;

我正在像這樣渲染這個組件

<ParticleComponent theme={props.theme} />

我試過這樣的內聯 styles

<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>

我試過使用這樣的風格道具

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

我試過像這樣的 Particle js 寬度道具

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

我正在考慮嘗試使用類名方法，但是當它沒有使用內聯 styles 進行更改時，類名方法會提供什么幫助。 沒有其他設置為固定的 div，它與滾動條重疊，設置 canvas position 絕對無濟於事，因為我希望它保持固定，rest 的元素可滾動。

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;

component 屬性上的內聯 styles 不起作用。 我使用組件生命周期來添加內聯樣式屬性