I have a CMS that allows user to add a Gallery section. The gallery section is built on top of [react-photo-album library](https://react-photo-album.com/).

For my photo album to render properly I need to import it's stylesheet provided inside the library like this:

import "react-photo-album/styles.css";

This works good if I do it in my layout.tsx, but since the user does not always use the gallery component it would be stupid to import it's CSS when not needed. So this got me thinking about importing it directly inside my Gallery section (which is dynamically imported by my <SectionRenderer /> component), but for some reason this does not work?

I guess my main problem is improting it inside layout.tsx works but not inside my component.

// layout.tsx
// works properly but is included even on pages that don't need it
import "react-photo-album/styles.css";

export function RootLayout() {...}

// gallery-section.tsx
// does not work for some reason
import "react-photo-album/styles.css";

export function GallerySection() {...}

Any ideas on how to fix this?