Question

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

除了向每个按钮添加类外，还有其他方法吗？

按钮的所有变体也不应该跟随根的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"
  }
},

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

1 个答案: