Search code examples
reactjsenvironmentreact-functional-component

CSS of reactjs customized component is different in stage environment

I am a newbie web developer and stakeoverflow. I am using Reactjs and Material UI. In my current task, I notice that the CSS styling is behave differently between stage and my local development. I don't have access to the code deployed in the stage server to check if this issue is related to server. This bug appeared after merging my code into stage so I think the issue maybe not from our stage server (caching issue, dependency/env issue ....), it might be due to my mistake in the code.

In local development (the div is rounded, desired output): Image 1 Image 2

After merged into stage (the div is squared, bug): Image 1 Image 2

  • DateRange.tsx is a functional component that render this Component, it will be used by others components say A.tsx
  • In local dev, I was editing the code in DateRange.tsx components, and all the files that uses it
  • We deployed those changes to stage and noticed that the CSS styling was buggy, where this bug didn't appear in development environment.
  • We decided to revert my code, and we have already make sure the reverted code is 100% same as the code before merging.
  • After merging the reverted code into stage, the CSS bug is still in stage.

I never editing on any styling function and never add dependencies throughout the development. I have tried access the stage with different browsers and different machine. I am here to seek some advise why it happens. This CSS issue never happend in local development.

Thousands of thanks!

Solution

  • I have 2 suggestions for you:

    1. Try to find the problem by opening the browser dev tools in local development and staging. Comparing the css of the two and trying to find the exact line difference.
    2. In most cases, a staging deployment will have extra optimizations that you don't have when developing locally. A minifier might alter your css classes in the production build, causing them not to be applied properly.

    In regards to the revert not working, I don't have a good suggestion (other than cache problems), that's pretty weird.