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

概述=工作
包含=不工作

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

有人知道出了什么问题吗？

Answer 1

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

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

Answer 2

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