NextJS项目中Lottie动画背景呈黑色，如何设置为透明？

问题详情 #

在NextJS项目中使用@lottiefiles/react-lottie-player加载Lottie JSON动画时，所有动画均显示黑色背景。已执行以下操作但未解决问题：

• 在Player组件上设置background='transparent'属性
• 在父级HeroAnimation（styled-components定义的div）上尝试设置透明背景
• 确认导出Lottie文件时已在编辑器中启用透明背景
• 尝试过lottie-react等其他库排查问题，当前仍使用@lottiefiles/react-lottie-player

相关代码 #

Player组件使用代码：

<HeroAnimation>
     <Player
      autoplay
      loop
      src={HeroTextAnimation}
      background='transparent'>
         <Controls visible={false} />
     </Player>
</HeroAnimation>

HeroAnimation组件定义：

const HeroAnimation = styled.div`
    height: 554px;
`;

项目依赖版本：

"dependencies": {
    "@chakra-ui/icons": "^2.0.15",
    "@lottiefiles/react-lottie-player": "^3.5.0",
    "@next/font": "13.1.1",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^5.3.6"
  }

解决方法 #

1. 强制覆盖内部容器/Canvas的背景样式 #

@lottiefiles/react-lottie-player生成的内部容器或Canvas可能会忽略组件的background属性，通过styled-components直接覆盖样式：

const HeroAnimation = styled.div`
    height: 554px;

    /* 覆盖lottie播放器容器背景 */
    .lottie-player {
        background: transparent !important;
    }

    /* 直接强制Canvas背景透明 */
    canvas {
        background-color: transparent !important;
    }
`;

2. 检查并修改Lottie JSON文件的背景配置 #

部分情况下，即使编辑器导出时选择透明，JSON文件中仍可能残留黑色背景配置。打开对应的Lottie JSON文件，搜索"bg"字段：

• 若存在"bg": "#000000"这类配置，直接删除该字段，或修改为"bg": "transparent"

3. 给Player组件添加内联样式替代background属性 #

尝试用内联样式直接设置播放器背景，而非组件自带的background属性：

<Player
  autoplay
  loop
  src={HeroTextAnimation}
  style={{ backgroundColor: 'transparent' }}>
     <Controls visible={false} />
</Player>

4. 排查全局样式冲突 #

检查项目中的全局CSS文件或CSS重置规则，确认是否存在强制给canvas元素设置黑色背景的代码，如有则修改或删除对应规则。

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