Main.scss causing style overlap

[dylanhusted]

The main.scss file has a definition for a background color for a very common id name, #app:

#app { background: pink; }

This caused the background of our actual app to be pink, and took some time to identify the root cause. I think react-file-viewer should use less common naming to avoid issues like this. Other classes in that file are good examples: .pg-viewer-wrapper, #xbim-viewer, etc.

In issue #64 , it was pointed out that making this an id instead of a class means you can only use react-file-viewer once per page, which is another issue with this naming choice.

For now, we can override this on our end, but that will cause RFV's intended styling to break (though I'm not sure where pink is actually supposed to show in this case).

[yangchih]

I have the same issue. 11/06/2020

[alexpopawork]

25/03/2021, still having this problem. After installing the package the app background became pink and we need an !important css rule to override it. Here's a screenshot of the styles added by the package.

[ricardosikic]

is this bug have fixed?

[ricardosikic]

25/03/2021, still having this problem. After installing the package the app background became pink and we need an !important css rule to override it. Here's a screenshot of the styles added by the package.

have this worked? (override) i have change the style but nothing

[bahimzabir]

Solved: the problem is that in the main.scss of the "react file viewer" package, there is that #app {background color: pink} in your react app go to the global CSS of your app and override that #app styling like that:

#app { background-color: var(--background-color) !important; //change "var(--background-color)" to whatever color you are using }

that's worked for me