Particles.js 没有覆盖整个页面，而是在卡片组件内

Question

我想要 Particles.js 作为背景。但是，它只显示在 Card 组件内部。还有我怎样才能让 particles.js 不通过卡。到目前为止，这张卡片就像一张透明卡片，你只能看到穿过它的线条。我只是想让 Particles.js 留在卡片后面。我怎样才能做到这一点？谢谢。

我在这里重新创建了它：https://codesandbox.io/s/basiccard-material-demo-forked-p644e?file=/Form.js

卡片组件

import React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardHeader, styled } from "@mui/material";

const StyledCard = styled((props) => <Card {...props} />)(({ theme }) => ({
  maxWidth: 500,
  margin: "0 auto",
  marginBottom: "1rem",
  marginTop: "1rem"
}));

const CardComponent = (props) => {
  const { title, content } = props;

  return (
    <StyledCard sx={{ minWidth: 275 }} elevation={5}>
      <CardHeader title={title} />
      <CardContent>{props.children}</CardContent>
    </StyledCard>
  );
};

export default CardComponent;

表格

import React from "react";
import CardComponent from "./CardComponent";
import { TextField } from "@mui/material";

const Form = (props) => {
  const { children } = props;

  return (
    <CardComponent>
      <form
        style={{
          position: "relative",
          width: "100%",
          height: "200px"
        }}
      >
        <TextField
          label="sample1"
          style={{
            position: "absolute",
            top: "25%",
            left: "50%",
            marginLeft: "-150px",
            width: "300px",
            zIndex: "1",
            color: "red"
          }}
        />

        <TextField
          label="sample2"
          style={{
            position: "absolute",
            bottom: "25%",
            left: "50%",
            marginLeft: "-150px",
            width: "300px",
            zIndex: "1"
          }}
        />
        {children}
      </form>
    </CardComponent>
  );
};

export default Form;

Particles.js

import React, { Component } from "react";
import Particles from "react-tsparticles";

class Canvas extends Component {
  render() {
    return (
      <Particles
        style={{
          position: "absolute",
          top: "0",
          left: "0",
          height: "100%",
          width: "100%",
          margin: "0",
          padding: "0",
          zIndex: "0"
        }}
        options={{
          fullScreen: {
            enable: false
          },
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                area: 800
              }
            },
            color: {
              value: "#fbc106"
            },
            shape: {
              type: "circle"
            },
            opacity: {
              value: { min: 0.1, max: 0.4 },
              animation: {
                enable: true,
                speed: 1,
                sync: false
              }
            },
            size: {
              value: { min: 0.1, max: 3 },
              animation: {
                enable: true,
                speed: 2,
                sync: false
              }
            },
            links: {
              enable: true,
              distance: 100,
              color: "#fbc106",
              opacity: 1,
              width: 1
            },
            move: {
              enable: true,
              speed: 1,
              direction: "none",
              random: false,
              straight: false,
              outModes: {
                default: "out"
              }
            }
          },
          interactivity: {
            detectsOn: "window",
            events: {
              onHover: {
                enable: false
              },
              onClick: {
                enable: false
              },
              resize: true
            }
          },
          detectRetina: true
        }}
      />
    );
  }
}

export default Canvas;

Demo.js

import React from "react";

import Particles from "./Particles";

import Form from "./Form";

const styles = {
  root: {
    fontFamily: "sans-serif",
    textAlign: "center",
    height: "100%",
    background: "#222",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
};

export default function BasicCard() {
  return (
    <div
    //  style={styles.root}
    >
      <Form>
        <Particles />
      </Form>
    </div>
  );
}

Answer 1

Form 组件当前正在控制其子组件（位于 relatively）的堆栈上下文，包括 Particles。换句话说，绝对位于 Form 中的 Particles 被限制在 Form 的堆叠上下文中。

一个解决方案是让 <Form /> 和 <Particles /> 在 demo.js 中成为兄弟姐妹。例如：

<div>
  <Particles /> {/* Removes `Particles` from the `Form` stacking context entirely */}
  <Form />
</div>

然后为StyledCard定义zIndex、position和backgroundColor:

const StyledCard = styled((props) => <Card {...props} />)(({ theme }) => ({
  ...
  backgroundColor: "#fff", // Added -- You're going to have to define this based on the theme
  position: "relative" // Added so it can be "lifted"
  zIndex: "10", // Added to "lift" it above the particles
}));

您的问题有更好的解决方案，但这是最简单的解决方案，因为它需要最少的重构。

注意：卡片本身没有背景颜色——您需要包含另一个有背景颜色的组件，例如 Paper，或者添加你自己的背景颜色。我添加了白色 (#fff) 作为示例，但如果您走这条路，您可能希望将其从 theme 对象中移除。

工作代码沙箱：https://codesandbox.io/s/basiccard-material-demo-forked-6lyk8?file=/CardComponent.js

如果您有兴趣探索堆叠上下文的工作原理，this demo that I created a few years ago 可能会对您有所帮助。

Particles.js 没有覆盖整个页面，而是在卡片组件内

Particles.js does not cover the entire page but instead it is inside the card component

javascript

reactjs

material-ui

particles.js