Rendering issue with multiple .css files

[apaquette]

Describe the bug

While implementing this component into my project, I encountered an issue where the component will not render if other .css files are being used in the same .tsx. This .css file applies styling to other components as well as the individual photos being displayed in the gallery. However, even when removing the styling being applied to individual photos, the entire component sometimes does not render. I noticed I can temporarily fix the issue by commenting out my import CSS line, reloading the webpage, and adding it back in. The component will render with the react-photo-album/styles.css, then will apply my own styling on top of that upon reload.

Expected behavior

I expect the component to render if I am using other .css files, and I should also be able to apply my own styling to the component with my .css files.

How to reproduce

Create a .tsx component and add the component with an array of images for display. Add an import statement for the react-photo-album styling as well as an additional .css file that applies styling to other elements on the page. Start the project and on occasion, the component will fail to render despite no changes being made to the code.

Screenshots / Logs

No response

Additional context

I am containerizing with Docker and am using React version 18.3.1 and react-photo-album 3.0.2.

[apaquette]

I've moved the stylings from react-photo-album/styles.css into my .css file to ensure there is only one .css file being used and can confirm the issue is present with a single .css file. The temporary fix of commenting out the import line, saving, uncommenting it and saving again still causes the component to render upon reload.

[apaquette]

Additional info on recreating the issue: I noticed that reloading the webpage after having the component render manually causes the component to not render on subsequent webpage loads.