CODEWITHSUNDEEP
javascriptreactjsmaterial-uistyling
Jackrin
Jackrin

Reputation: 83

Material UI Button loses style after refreshing the page

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)

Upvotes: 0

Views: 3810

Answers (2)

Abhishek Prajapati
Abhishek Prajapati

Reputation: 106

I am new in mui and my button loses its background color. because of a layout.css file generated by mui. it has following block...

/*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Remove default button styles.
*/
 
button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}

I don't know why this happened I mean the page was perfect just a day before and today it is happening...

Upvotes: 0

andrewpomeroy
andrewpomeroy

Reputation: 141

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)

Upvotes: 3

Related Questions