到目前为止，我试图在最新版本的Next.js中使用tsParticles（特别是react-tsparticles），但是当我复制并粘贴particle.json并将其绑定到<Particles/>组件时，它的行为并不符合预期。所有粒子都向其相对位置移动（非常类似于Hyperspace示例），而不是遵循六边形路径。
另一个奇怪的问题是，它没有遵循CSS的背景颜色（这也适用于其他CSS）
TSX文件和css似乎不是主要问题，因为所有其他的插件和示例都能按预期工作。
如何设置particles.json文件以产生与上面显示的六边形预设相同的效果？
我的组件：

'use client'

import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import type { Container, Engine } from "tsparticles-engine";

export function ParticleContainer() {
    const particlesInit = useCallback(async (engine: Engine) => {
        console.log(engine);
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            canvasClassName="particle-canvas"
            url="/particles.json"
        />
    );
}

我的组件用例：

import { ParticleContainer } from "../components/particles-container"

export default function About() {
    return (
        <main>
            <div id="carousel-container" className="carousel-container">
                <div id="home-carousel" className="">
                    <div className="carousel-inner">
                        <ParticleContainer/>
                        <div className="carousel-item active">
                            <div className="carousel-caption ">
                                <div className="text-center">
                                    <span className="align-middle">
                                        <h2>My Title</h2>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <section>
                <div className="container col-xxl-8 px-4 py-5">
                    <div className="">
                        <p className="main-text">
                            Content ... Lorem Ipsum... 
                        </p>
                    </div>
                </div>
            </section>
        </main>
    )
}

渲染页面的示例与其他预设一起正常工作：

预期颗粒行为：

导出六边形预设选项提供的当前json（在我的情况下，我只是将全屏切换为false）：https://pastebin.com/b8qnJyyG
不良行为：