Material-Ui 主题自定义：悬停在包含的按钮上

Question

所以我正在尝试在我的 React 应用程序上为 Material-Ui 配置一个主题。在应用程序中，我使用了两种不同类型的按钮，包含和概述。问题是包含按钮上的悬停效果（轮廓可以正常工作）并且默认为灰色悬停效果。

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,
    },
  },
 }
}

概述 = 工作
包含=不工作

这是来自元素检查器，我的颜色是带有删除线的颜色
background-color:
#e0e0e0.MuiButton-contained:hover
rgba(23, 0, 255, 0.3).MuiButton-contained:hover

有人知道怎么回事吗？

Answer 1

默认情况下，悬停颜色（背景，用于包含；边框，用于轮廓）将为palette.primary.dark。可能是这些冲突的设置可能会导致一些问题，请尝试将其设置在那里。

Answer 2

您可以尝试添加root，例如：

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