Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the outlined one functions properly) as it defaults to a grey hover effect.
overrides: {
MuiButton: {
contained: {
backgroundColor: palette.primary.main,
color: palette.primary.contrastText,
"&:hover": {
backgroundColor: palette.primary.active,
},
},
outlined: {
color: palette.primary.main,
"&:hover": {
backgroundColor: palette.primary.active,
},
},
}
}
outlined = functioning
contained = not functioning
This snippet is extracted from the element inspector wherein the color has a strike through
background-color:
#e0e0e0.MuiButton-contained:hover
rgba(23, 0, 255, 0.3).MuiButton-contained:hover
Does anyone have any insights on what might be causing this issue?