javascript - 在 Gatsby 和 Material UI 中使用 Lottie 动画时出现布局问题

Question

在 Gatsby 和 Material UI 中使用 Lottie 动画时出现布局问题。这是代码

import React from "react"
import Grid from "@material-ui/core/Grid"
import Typography from "@material-ui/core/Typography"
import Lottie from "react-lottie"
import { makeStyles } from "@material-ui/core/styles"
import useMediaQuery from "@material-ui/core/useMediaQuery"

import data from "../../images/data.json"

const useStyles = makeStyles(theme => ({
  textContainer: {
    padding: "2rem",
    [theme.breakpoints.down("xs")]: {
      padding: "1rem",
    },
  },
  heading: {
    [theme.breakpoints.down("xs")]: {
      fontSize: "3.5rem",
    },
  },
}))

export default function HeroBlock() {
  const animationData = JSON.parse(JSON.stringify(data))
  const classes = useStyles()

  const matchesLG = useMediaQuery(theme => theme.breakpoints.down("lg"))
  const matchesMD = useMediaQuery(theme => theme.breakpoints.down("md"))
  const matchesXS = useMediaQuery(theme => theme.breakpoints.down("xs"))

  const defaultOptions = {
    loop: true,
    autoplay: false,
    animationData,
  }

  return (
    <Grid container justifyContent="space-around" alignItems="center">
      <Grid item classes={{ root: classes.textContainer }}>
        <Grid container direction="column">
          <Grid item>
            <Typography
              align="center"
              variant="h1"
              classes={{ root: classes.heading }}
            >
              The Premier
              <br />
              Developer Clothing Line
            </Typography>
          </Grid>
          <Grid item>
            <Typography align="center" variant="h3">
              high quality, custom-designed shirts, hats, and hoodies
            </Typography>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Lottie
          isStopped
          options={defaultOptions}
          width={
            matchesXS
              ? "20rem"
              : matchesMD
              ? "30rem"
              : matchesLG
              ? "40rem"
              : "50rem"
          }
        />
      </Grid>
    </Grid>
  )
}

这是我的布局的 SS。动画应该在列中，但它是堆叠的。 这是我的布局的 SS

当我在控制台中检查 Lottie 动画生成具有样式的新 div 时，lottie 动画驻留在该 div 中。这是我在控制台中检查过的 div

<div style="width: 40rem; height: 100%; overflow: hidden; margin: 0px auto; outline: currentcolor none medium;">
Inside the div the Lottie animation is running. 
</div>

所以我认为主要的问题是这个div。如何解决这个问题呢。

标签： javascripthtmlcssreactjsmaterial-ui