粒子未在 tsarticles nextjs 中显示

Question

我想使用 向我的 NextJS 应用程序添加粒子背景yarn add react-tsparticles。但是当我添加 tsarticles 时，我可以看到它添加了画布，但我看不到粒子。这是配置：-

const ParticlesConfig = {
  autoplay: true,
  fullScreen: {
    enable: true,
    zIndex: 1,
  },
  particles: {
    number: {
      value: 10,
      density: {
        enable: false,
        value_area: 800,
      },
    },
    color: {
      value: '#fff',
    },
    shape: {
      type: 'star',
      options: {
        sides: 5,
      },
    },
    opacity: {
      value: 0.8,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false,
      },
    },
    size: {
      value: 4,
      random: false,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false,
      },
    },
    rotate: {
      value: 0,
      random: true,
      direction: 'clockwise',
      animation: {
        enable: true,
        speed: 5,
        sync: false,
      },
    },
    line_linked: {
      enable: true,
      distance: 600,
      color: '#ffffff',
      opacity: 0.4,
      width: 2,
    },
    move: {
      enable: true,
      speed: 2,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200,
      },
    },
  },
  interactivity: {
    events: {
      onhover: {
        enable: true,
        mode: ['grab'],
      },
      onclick: {
        enable: false,
        mode: 'bubble',
      },
      resize: true,
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: {
          opacity: 1,
        },
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3,
      },
      repulse: {
        distance: 200,
      },
      push: {
        particles_nb: 4,
      },
      remove: {
        particles_nb: 2,
      },
    },
  },
  retina_detect: true,
  background: {
    color: '#111',
    image: '',
    position: '50% 50%',
    repeat: 'no-repeat',
    size: 'cover',
  },
};

export default ParticlesConfig;

这是index.js 文件：-

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import ParticleBackground from '../components/ParticleBackground';

export default function Home() {
  return (
    <div className='home-main'>
      Aanvikshiki
      <ParticleBackground />
    </div>
  );
}

这是 ParticleBackground 文件：-

import React from 'react';
import Particles from 'react-tsparticles';
import ParticlesConfig from '../config/particle-config';
import styles from '../styles/Home.module.css';

const ParticleBackground = () => {
  return (
    <div id='particle-background'>
      <Particles
        id='tsparticles'
        particlesLoaded='particlesLoaded'
        particlesInit='particlesInit'
        options={ParticlesConfig}
        height='100vh'
        width='100vw'
      ></Particles>
    </div>
  );
};

export default ParticleBackground;

我还注意到，即使我的 CSS 也不适用于任何元素。CSS 位于 global.css 文件中。我不知道有什么矛盾。我从 tsarticle 的示例中复制了配置，然后美化了没有键的 JSON。请帮我解决这个问题。

Answer 1

这将解决您的问题。我在 ParticleBackground.js 中做了一些更改，并且还使用安装 tsarticles yarn add tsparticles，react-tsarticles 是不够的。这是代码：-

import React from 'react';
import { useCallback } from 'react';
import { loadFull } from 'tsparticles';
import Particles from 'react-tsparticles';
import ParticlesConfig from '../config/particle-config';
import styles from '../styles/Home.module.css';

const ParticleBackground = () => {
  const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await console.log(container);
  }, []);
  return (
    <div id='particle-background'>
      <Particles
        id='tsparticles'
        particlesLoaded='particlesLoaded'
        init={particlesInit}
        loaded={particlesLoaded}
        options={ParticlesConfig}
        height='100vh'
        width='100vw'
      ></Particles>
    </div>
  );
};

export default ParticleBackground;

你的 CSS 不工作的原因也是因为 tsarticles。现在它会起作用了。