1

I'm currently deploying a production build of my Next.js project using PM2 and NGINX however for some reason the production build has UI differences to the development version. I am using Material UI for the text (Typography component) and some of the other components such as IconButton and Select, I'm also using SCSS & CSS modules. Here are some screenshots:

Development (How it should look): enter image description here

Production (How it looks to user): enter image description here

Notice the size of the Task caption text, the spacing on the two dropdowns and the dark mode button color and positioning.

I've tried rebuilding the production version, switching to SCSS module instead of CSS (which I never really thought would work but I prefer SCSS), and I tried to see if other people have experienced similar issues to no avail.

EDIT:

Here are some images showing the difference in styling between production and development for the top area dropdowns.

Production (has some extra css from unknown source): enter image description here

Development: enter image description here

EDIT 2:

I believe the CSS is being loaded in the wrong order and the FormControl MUI styling is being loaded after the module causing the margin to be set to 0 still not sure how to resolve this issue...

4
  • 1
    Did you check the devtools of your browser? It may help pin point the problem. Maybe it is part of the CSS that could not load for some reason. Try comparing the Computed Styles of the elements to find what's the difference and work from there.
    – Salketer
    Jun 28 at 14:28
  • @Salketer so I just looked at the styling in production specifically at the top dropdowns and noticed some additional css being loaded in that is absent in development that is causing the spacing issue by removing the margin. Not sure how to prevent it though or where it is coming from.
    – Josh
    Jun 28 at 14:36
  • 1
    From the screenshot it comes directly from a <style> node. Check your source, there may be comments or something that would help... The classes are not the same also.
    – Salketer
    Jun 28 at 14:42
  • @Salketer I think I have a possible fix by using additional sx props on the affected components I can override the styling issues.
    – Josh
    Jun 28 at 14:57

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.