FP Default Styles & Overrides Not Consistent when Building React (Gatsby) Project

[camp54]

Struggling with the proper way to override certain CSS settings being pushed down with the package . Using the fullPage.js React Component (part of a Gatsby build), and have not had any luck finding this question correctly answered.

I found this, which is the closest issue to what I'm facing: Link to Simliar Issue

But in the 3.0.9 release, that reference isn't even called so commenting this out does nothing. I do see the "exports.push" (line 1696) in the dist/react-fullpage.js that seems to set everything (visible in the head tag), and can certainly adjust here - but this would be overwritten with any releases, refresh of node_modules, etc.

Ultimately, I want better control over the "fp-tableCell" to get my layout to work. Can you please advise the proper way to adjust any of the default CSS settings from a Build perspective?

For clarity, in a local development mode (e.g. gatsby develop), a simple override.css file is sufficient, and that isn't carrying forth to the build. The issue mentioned above is a few years old, and it appears further changes have been made to fullPage.js. Some of the overrides do actually carry forth to the build of the project, e.g.

/* This below adjusts the color of the Active Nav Tooltip */
#fp-nav.fp-show-active a.active + .fp-tooltip,
.fp-tooltip {
  color: blue;
}

My current challenge is with the styling for fp-tableCell, but sure I will encounter some others as we are adjusting and would appreciate a definitive answer on how to correctly override any of the default fp stylings.

Thanks in advance for any support!

[alvarotrigo]

@cmswalker perhaps the easiest way to deal with this is by just taking the CSS out of the bundle? This is the approach on the vue-fullpage and angular wrappers.

[camp54]

Thanks, this does appear to be working properly now. Appreciate the feedback!

[camp54]

@cmswalker perhaps the easiest way to deal with this is by just taking the CSS out of the bundle? This is the approach on the vue-fullpage and angular wrappers.

@alvarotrigo .. A follow-up question on this if you don't mind, but certainly related.

We purchased a commercial license for this as well, so are now fully licensed to use for our public-facing website. This process around removing the CSS works great for manual builds and pushes, but with an automated pipeline, I'm running into some additional issues.

Quick summary of the architecture:

• Gatsby (React) site with Strapi as back-end CMS
• Using AWS' CodeBuild/CodePipeline that pushes out any changes into AWS (S3 Hosted website)
• We have a "preview" version that is restricted, but allows us to see the changes before approving the change and pushing to "production" (the reason for the automated pipeline)

The pipeline build runs an 'npm install' every time and thus installs '@fullpage/react-fullpage' (which is obviously a dependency in package.json). This obviously prevents any locally-made changes to the bundle to not properly reflect in production(removing the CSS is not reflected). I ran into some issues w/ CSS precedence, that I had to use !important to override (not a best practice, but it's working) - I do want to be able to control this more effectively though by not using !important and just specifying the CSS needed.

Ideally, could you include an option (one that maybe requires a valid license) to prevent that CSS build in the bundle of the core npm package?

Would you have any other suggestions to control this, that I may be missing in the configuration/documentation?

[alvarotrigo]

Ideally, could you include an option (one that maybe requires a valid license) to prevent that CSS build in the bundle of the core npm package?

I think we can just not include it by default like we do on Vue & Angular wrappers. Following these same kind of style: https://github.com/handsontable/handsontable/tree/master/wrappers/angular#usage

@camp54 want to try doing the pull request for it?

[camp54]

Ideally, could you include an option (one that maybe requires a valid license) to prevent that CSS build in the bundle of the core npm package?

I think we can just not include it by default like we do on Vue & Angular wrappers. Following these same kind of style: https://github.com/handsontable/handsontable/tree/master/wrappers/angular#usage

@camp54 want to try doing the pull request for it?

I would be happy to. We have a few other things going on with our launch, but I will circle back to this next week as I do think it would be viable for the React side.

[alvarotrigo]

Awesome!

[keshav263]

Hi @alvarotrigo , can you help me figure out why styles are not getting overridden? I have already tried the following:

1. As instructed, I removed import fullpageStyles from 'fullpage.js/dist/fullpage.min.css'and imported overrides.css in App.js. It works in development mode however style component takes precedence in production

2. Referred sandbox provided in the documentation and added <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js@3.0.1/dist/fullpage.min.css" /> ,then again imported overrides.css in App.js, still no luck

3. Made styles !important, however that made it far too complicated and i wasn't able to achieve the desired styles

I guess I am doing something wrong, it will be really helpful if you could help me out. I am literally stuck on it for more than a day