Lotties have a black background in my NextJS project. How can I make them transparent?

Question

All my LottieFiles (JSON) have a black background when I import them onto my NextJS project. I tried setting background='transparent' on both the Player or the parent div, to no avail.

I made sure to export my Lotties with a transparent background directly from the Lottie editor.

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

Note: HeroAnimation tag is a styled component div -- see below:

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

package.json dependencies:

  "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"
  }

Tried other libraries (ie lottie-react) to see if it was a library-dependent issue. Currently using "@lottiefiles/react-lottie-player"

Answer 1

If your library renders the Lottie to SVG in the DOM you can use a CSS selector to change the color of the SVG path/shape.

Answer 2

Global css was adding a black background to every element -- I removed it and it worked.