Button 组件的覆盖不会改变悬停颜色

Question

我试图通过覆盖主题 css 来更改项目中所有按钮的颜色。按钮的颜色已更改但悬停颜色仍然透明，我该如何覆盖它？

除了为我的每个按钮添加一个类之外，还有其他方法吗？

按钮的所有变体都不应该遵循根的 css 吗？

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#35C37D',
      main: '#35C37D',
      dark: '#35C37D',
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#35C37D',
      main: '#35C37D',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#35C37D',
    },
    // error: will use the default color
  },
  overrides: {
    MuiButton: {
      // Name of the rule
      root: {
        // Some CSS
        background: 'rgba(53, 195, 125, 100)',
        borderRadius: 0,
        border: 0,
        colorInherit: '#fff',
        color: 'white',
        height: 40,
        padding: '0 30px',
        boxShadow: '4px 9px 26px 0 rgba(16,124,71,0.10)',
        '&:hover': {
          textDecoration: 'none',
          backgroundColor: '#35C37D',
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            backgroundColor: '#35C37D',
          },
        },
      },
      textPrimary: {
        color: '#fff',
      },
      textSecondary: {
        color: '#fff',
      },
      contained: {
        color: '#fff',
      },

      containedPrimary: {
        color: '#fff',
      },

      containedSecondary: {
        color: '#fff',
      },

      raised: {
        color: '#fff',
      },

      colorInherit: {
        color: '#fff',
      },

    },
  },
  typography: {
    fontFamily: 'azo-sans-web',
    // The default font size of the Material Specification.
    fontSize: 14, // px
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    // Tell Material-UI what's the font-size on the html element.
    // 16px is the default font-size used by browsers.
    htmlFontSize: 16,
  },
});

Answer 1

我想到了。如果有人关心，这里是代码沙箱https://codesandbox.io/s/y2qyk9rn4x

只需要为每个变体添加这个：

outlined: {
  "&:hover": {
    backgroundColor: "#35C37D"
  }
},