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>.

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.