Including index.css interferes with other classes Type: Bug

[dudasaron]

Overview

When including import '@dotlottie/react-player/dist/index.css'; in the application as described in the documentation, it adds some unscoped css which can interfere with application style, for example it adds the following style:

.error {
  display: flex;
  margin: auto;
  justify-content: center;
  height: 100%;
  align-items: center;
}

It's a very common class name, and using it unprefixed can cause unexpected errors in different places. In my specific case, the issue is with the margin: auto; part, but I have no guarantee it won't interfere with other class names too.
...

Consuming repo

What repo were you working in when this issue occurred?

I'm using the @dotlottie/react-player package.

Labels

• Add the Type: Bug label to this issue.

[theashraf]

Thank you, @dudasaron.

I believe your issue is unrelated to this project's packages.

You can review the detailed documentation for dotlottie-web and its associated wrappers here:

https://developers.lottiefiles.com/docs/dotlottie-web/

If you're interested in the React wrapper, you may refer to the following link:

https://developers.lottiefiles.com/docs/dotlottie-web/dotlottie-react/getting-started/

[dudasaron]

Thanks for the quick reply @theashraf!
It looks like I was using the now deprecated dotlottie player instead of the dotlottie-web. Switching to the new one solved my issue.