Override of Button component doesn't change the hover color

Question

I am trying to change the color of the all the Button's in the project by overriding the theme css. The color of the button has changed but hover color is still transparent, how can I override it ?

Is there any other way to this apart from adding a class to each of my buttons.

Also shouldn't all the variants of a button follow the css of the root?

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

Girisha C · Accepted Answer · 2018-10-11 05:30:21Z

18

I figured it out. Here is the code sandbox if anyone cares https://codesandbox.io/s/y2qyk9rn4x

Just need to add this for each variant:

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

edited Oct 11, 2018 at 5:30

Girisha C

1,9701 gold badge12 silver badges20 bronze badges

answered Oct 11, 2018 at 4:21

AmitJS94

1,2121 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override of Button component doesn't change the hover color

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related