react-particles-js：无法设置背景和宽度

Question

我安装了这个 react-particles-js，正如我所见，一切正常，但现在我创建了一些自定义设计，并通过它的参数将其分配给粒子，就像这样：

<Particles
          params={{
            particles: {
              number: { value: 35, density: { enable: true, value_area: 800 } },
              color: {
                value: [
                  'BB4D10',
                  '#820E42',
                  '#BD740F',
                  '#248592',
                  '#5F4DAF',
                  '#8BA00F',
                ],
              },
              shape: {
                type: 'circle',
                stroke: { width: 0, color: '#000000' },
                polygon: { nb_sides: 3 },
                image: { src: 'img/github.svg', width: 100, height: 100 },
              },
              opacity: {
                value: 1.5,
                random: false,
                anim: {
                  enable: false,
                  speed: 1,
                  opacity_min: 0.1,
                  sync: false,
                },
              },
              size: {
                value: 9,
                random: true,
                anim: {
                  enable: false,
                  speed: 43.15684315684316,
                  size_min: 0.1,
                  sync: false,
                },
              },
              line_linked: {
                enable: true,
                distance: 100.82952832645452,
                color: '#ffffff',
                opacity: 1.4,
                width: 1,
              },
              move: {
                enable: true,
                speed: 2,
                direction: 'none',
                random: true,
                straight: false,
                out_mode: 'out',
                bounce: false,
                attract: { enable: false, rotateX: 600, rotateY: 1200 },
              },
            },
            interactivity: {
              detect_on: 'canvas',
              events: {
                onhover: { enable: true, mode: 'bubble' },
                onclick: { enable: false, mode: 'push' },
                resize: true,
              },
              modes: {
                grab: { distance: 400, line_linked: { opacity: 1 } },
                bubble: {
                  distance: 109.63042366068159,
                  size: 13,
                  duration: 2,
                  opacity: 8,
                  speed: 3,
                },
                repulse: { distance: 200, duration: 0.4 },
                push: { particles_nb: 4 },
                remove: { particles_nb: 2 },
              },
            },
            retina_detect: true,
          }}
          style={styling}
        />

在那之后，我尝试添加背景颜色以使其看起来正确，但正如我所见，我尝试传递给粒子的样式不起作用，至少位置适用.

const styling = {
  backgroundColor: '#2a2e31',
  position: 'absolute',
  width: '10%',
};

Answer 1

有几种方法可以控制样式：

您可以为 canvas 包装器提供 className 属性，为 canvas 的宽度提供 width 属性：

<Particles
  ...
  style={styling}
  width="10%"
  className="particles-wrapper"
/>

然后，写 CSS:

.particles-wrapper {
  background-color: #2a2e31;
  height: 100%;
  width: 10%; // You may need this or may not depending on your requirement
}

或者，您可以添加一个新的 div 来包装 <Particles .. /> 并为此 div 设置样式，默认情况下 canvas 是透明
或者，您可以使用 canvasClassName 道具并为此设置样式 class。

这是使用上述第一种方法后的快照：

我们需要分别传递 width、height 的原因是，正如 source code 中所见，props.style 中存在的那些正在被这样覆盖：

style={{
  ...this.props.style,
  width,
  height
}}

Answer 2

为粒子设置背景的最简单方法是使用 background 选项。

<Particles params={{
  background: {
    color: "#000"
  },
  /* all other options you set */
}} />

这将为 canvas 设置背景。如果您需要透明的，请使用@ajeet-shah 回答。

react-particles-js：无法设置背景和宽度

react-particles-js: Can't set a background and width

javascript

css

reactjs

particles.js

react-particles-js