Styling

Every default style ships at zero specificity, so any rule of yours beats any default, per property, with no !important.

import { Lottie } from "lottie-react";export function UtilityClasses() {  return (    <Lottie      src="/anim.json"      autoplay      loop      className="size-32 rounded-xl bg-blue-500/10 p-2 ring-2 ring-blue-500"    />  );}

The element is yours

className, style, id, data-*, aria-* and DOM event props all land on the element <Lottie> renders. Utility classes, CSS modules and styled(Lottie) work the way they do on a <div>.

Recolouring

The engine draws fills and strokes as attributes on the SVG, and CSS beats attributes, so a rule on the animation's element recolours it. With currentColor, the surrounding text colour becomes the icon's colour:

import { Lottie } from "lottie-react";export function Recolour() {  return (    <Lottie      src="/anim.json"      autoplay      loop      className="size-32 text-pink-500 [&_svg_path]:fill-current [&_svg_path]:stroke-current"    />  );}

In plain CSS the same rule is .icon svg path { fill: currentColor; stroke: currentColor }; it sets both because artwork draws with fills, with strokes, or with both, as this file does. This route is for the svg renderer and solid colours; to recolour for every renderer, gradients included, rewrite the colours in the animation itself and pass the object to src, which reloads when its content changes.

Layered CSS

When your styles live in cascade layers, declare the library's layer first. It is one line, shown in Installation.

The class names

The rendered elements carry stable class names: lottie-root on the wrapper and lottie-display on the animation container. They are part of the public contract, so a stylesheet anywhere can target them and survive updates.