naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.75k stars 128 forks source link

Issue with importing pagination CSS in Gatsby #826

Open SvenvtH opened 1 year ago

SvenvtH commented 1 year ago

Description

I am encountering an issue while trying to import CSS for the @egjs/flicking-plugins library within a Gatsby project. The problem seems to arise from the fact that some components are being created after the CSS is assigned to the elements, causing unexpected behavior and styling issues.

Steps to check or reproduce

  1. Create a new Gatsby project.
  2. Install the @egjs/react-flicking library using your preferred package manager.
  3. Import css for pagination using (import "@egjs/flicking-plugins/dist/pagination.css";)
  4. Create a carousel using the Flicking component and include Pagination in the plugins prop.
  5. Add the following code inside the Flicking component `
        </ViewportSlot>`

Expected Behavior:

The imported CSS should be properly applied to the components from the @egjs/flicking-plugins library, resulting in correct styling and behavior for the pagination.

Actual Behavior:

Due to the asynchronous nature of component creation in Gatsby, it appears that some components from the @egjs/flicking-plugins library are being generated after the CSS is assigned, leading to inconsistent styling and functionality.

Additional Information:

When I add the styling using Chrome DevTools , it does seem to work. This means that the pagination plugin is being rendered in the html. Just not the styling