在Gatsby和Material UI中使用Lottie动画出现布局错乱问题

问题根源 #

你遇到的布局堆叠问题核心由两个原因导致：

• 外层MUI Grid容器的子Item没有设置响应式宽度规则，当Lottie动画的宽度超过当前视口下的剩余可用宽度时，元素会被挤到下一行
• Lottie自动生成的外层div默认设置了height: 100%，如果没有父容器限制高度，会额外撑开布局高度，进一步加剧堆叠异常

具体修改步骤 #

1. 给Grid Item配置响应式宽度 #

给文本和动画对应的两个Grid Item添加断点宽度配置，中等及以上屏幕二者平分宽度，小屏幕下自动纵向排列适配：

// 文本区域Grid Item
<Grid item xs={12} md={6} classes={{ root: classes.textContainer }}>

// 动画区域Grid Item
<Grid item xs={12} md={6}>

2. 覆盖Lottie内置div样式 #

react-lottie组件支持直接传入style属性，会直接作用到自动生成的外层div上，覆盖默认的height: 100%规则：

<Lottie
  isStopped
  options={defaultOptions}
  style={{ height: "auto" }} // 新增该行覆盖默认高度
  width={
    matchesXS
      ? "20rem"
      : matchesMD
      ? "30rem"
      : matchesLG
      ? "40rem"
      : "50rem"
  }
/>

3. 可选：补充Lottie高度配置 #

如果动画出现拉伸变形，可以根据断点同步配置高度参数：

<Lottie
  // 其他属性不变
  height={
    matchesXS
      ? "20rem"
      : matchesMD
      ? "30rem"
      : matchesLG
      ? "40rem"
      : "50rem"
  }
/>

修改后完整代码 #

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 xs={12} md={6} 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 xs={12} md={6}>
        <Lottie
          isStopped
          options={defaultOptions}
          style={{ height: "auto" }}
          width={
            matchesXS
              ? "20rem"
              : matchesMD
              ? "30rem"
              : matchesLG
              ? "40rem"
              : "50rem"
          }
          height={
            matchesXS
              ? "20rem"
              : matchesMD
              ? "30rem"
              : matchesLG
              ? "40rem"
              : "50rem"
          }
        />
      </Grid>
    </Grid>
  )
}

内容的提问来源于stack exchange，提问作者Awais Raza