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):
Production (How it looks to user):
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):
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...