create-react-app / Material-UI App Styling Different on Deploy

Question

I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far

1. Read through my code many times being extra careful at every step.
2. Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
3. Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
4. Search google for prior such issues

So far, nothing has turned up. Could someone please guide me in the right direction?

The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .

For convenience, I have included my package.json here on pastebin.

Thank you so much for helping out.

============= EDIT =============

I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.

For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style , during build time these latter styles are overridden partially if not completely.

So if I do

import   React,
       { useRef }  from "react";
import {
         Button,
         makeStyle,
         Theme
       }           from "@material-ui/core";
/*
Start of functional component using memo
.
.
.
*/

const useClasses = useRef(makeStyle((theme : Theme) => { return {
      buttonStyles:
      {
          backgroundColor: theme.palette.text.hint
      }
}}));

const styles = useClasses.current();

<Button
    color={"secondary"}
    className={styles.buttonStyles}>
    button text
</Button>
/*
.
.
.
*/

in development, the button will have the backgroundColor I give it in makeStyles , but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main .

And sometimes, just even using a component from material-ui without any extra config causes a problem.

I am also using code splitting with lazy and Suspense if that matters.

Answer 1

StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.