javascriptreactjsmaterial-uimui-x-data-grid

The mui classes I use in my React project are not the same in local and live versions

In my React project, The mui classes I use in my project are different in local and live versions.

For example

localhost MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1knaqv7-MuiButtonBase-root-MuiButton-root

in live MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1rtnrqa

i try to update package json

Solution

  • This isn't a bug—it has to do with the difference between how styles are generated in dev mode vs in production. The class name with the random-looking string is used by Emotion, the styling engine that powers Material UI's styles. You don't have to worry about it when writing your CSS, and you should never target it for custom CSS since, as you can see, it behaves differently in different environments. The other class names with Mui prefixes are consistent across dev and prod and are safe to work with.