6

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?

Cedervall
  • 1,309
  • 2
  • 13
  • 20

2 Answers2

7

You can try adding root, so something like:

overrides: {
 MuiButton: {
  root: {
   "&:hover": {
     backgroundColor: palette.primary.active,
   },
  }
 }
}
cjohndesign
  • 178
  • 6
  • Don't know why it doesn't work, but I mangae to solve it with an important flag. `"&:hover": { backgroundColor: '${palette.primary.active} !important', },` – Cedervall Jul 01 '20 at 06:29
  • Hm, well good! Maybe it was in a conflict with `MuiButtonBase`? – cjohndesign Jul 01 '20 at 16:50
  • 3
    In v5, the object needs to be wrapped with `styleOverrides` https://next.material-ui.com/customization/theme-components/#global-style-overrides – svict4 Jul 13 '21 at 00:57
5

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.

Mordechai
  • 15,437
  • 2
  • 41
  • 82