Since no one answered to my question (Material UI Button loses Styling after page refresh) I'm asking again, this time including a CodeSandbox: https://codesandbox.io/s/bold-resonance-8c8pz?file=/src/components/style/Login-styling.js
Steps to reproduce problem:
1-Change a value in the "Login.styling.js" for the button (just to make react update the page) and now the button is the color you set.
2-Refresh the page (the button will not follow the style anymore)
The way JSS creates styles on-demand, the core styles for the Button component are overriding the styles you've defined with makeStyles
simply because the components are imported after the custom styles. If you inspect the element in Dev Tools, you can see that the .MuiButton-root
styles are overriding those under the generated class .makeStyles-button-2
-- two single-class CSS selectors have the same specificity, so the one that comes last ends up winning.
To fix this, you'll just want to reorder your imports, so that useStyles
is imported after the Button
and the rest of your MUI components.
https://codesandbox.io/s/laughing-lamport-0i1zt?file=/src/components/Login.js
(^ I didn't know what you were trying to accomplish with the 'disabled' button background color, so I used a Primary shade instead here for the sake of demonstration)