Material-Ui theme customization: hover on contained button

user_8655660 0
Viewed 5966

So I'm trying to configure a theme for Material-Ui on my React app. In the app I use two different type of buttons, contained and outlined. The problem is the hover effect on the contained button (the outlined works fine) and will default 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 = working
contained = not working

This is from the element inspector, where my color is the one with a strike through
background-color:
#e0e0e0.MuiButton-contained:hover
rgba(23, 0, 255, 0.3).MuiButton-contained:hover

Anyone got any idea what's wrong?

material-ui reactjs javascript
2 Answers

You can try adding root, so something like:

overrides: {
 MuiButton: {
  root: {
   "&:hover": {
     backgroundColor: palette.primary.active,
   },
  }
 }
}
user_55899530

By default, the hover color (the background, for contained; the border, for outlined) will be palette.primary.dark. It could be these conflicting setup might cause some issues, try setting it there.

user_17516400
Related