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

Question

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this:

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

After that, I'm trying to add a background color to make it look correctly, but as I can see the styling which I try to pass to the particle it just doesn't work, at least the position applies.

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

Answer 1

There are several ways to control the styling:

1. You can provide a className prop for canvas wrapper, and width prop for the width of canvas:

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

And, write the CSS:

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

2. Or, you can add a new div which would wrap the <Particles .. /> and set styling for this div as by default canvas is transparent.

3. Or, you can use canvasClassName prop and set the style for this class.

Here is a snapshot after using the 1st method from above:

---

The reason that we need to pass width, height separately is, as seen in source code, those present in props.style is being overwritten like this:

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