Why Material-UI is not overriding styles? - reactjs

Question

Im using Material-UI within my application. The typography and palletes overriding is working perfectly. But when I try to overrides the MUIButton, nothing happens. This is my Style file:
const theme = createMuiTheme(SculpStyle);
export const SculpStyle = {
typography: {
fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
//fontSize: 20
// htmlFontSize: 12,
},
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: "#50be9c"
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: "#1e8fb2",
main: "#ee4d73",
// dark: will be calculated from palette.secondary.main,
contrastText: "#ffcc00"
},
// contrastThreshold: 3,
// tonalOffset: 0.2
overrides: {
MuiButton: {
root: {
fontWeight: "bold",
backgroundColor: "red",
margin: "10px",
"&:hover": {
backgroundColor: "green"
}
}
}
}
}
};
Im following exactly the Material-UI API, but the Button is never overrided. What Im doing wrong here?

Answer 1

It looks like you defined your overrides on the wrong level, in your code those are nested within palette, but according to the documentation, the overrides for a specific component should be present on the "root" level of the configuration object (See here).
const theme = createMuiTheme(SculpStyle);
export const SculpStyle = {
typography: {
fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
//fontSize: 20
// htmlFontSize: 12,
},
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: "#50be9c"
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: "#1e8fb2",
main: "#ee4d73",
// dark: will be calculated from palette.secondary.main,
contrastText: "#ffcc00"
},
// contrastThreshold: 3,
// tonalOffset: 0.2
},
overrides: {
MuiButton: {
root: {
fontWeight: "bold",
backgroundColor: "red",
margin: "10px",
"&:hover": {
backgroundColor: "green"
}
}
}
}
};