How can I change MUI v5 Button to lighten on hover instead of darken using theme?

user_13553775 0
Viewed 1286

I have setup my theme as outlined in the docs.

palette: {
    primary: {
        main: customColor
    }
}

When I hover, my mui button darkens based on the main color, but I want it to lighten based on the same color (without having to hard code a value anywhere). How can I achieve this?

Update: Based on Prashant Jangam's answer I was able to get everything exactly as I needed it. See code below:

components: {
        MuiButton: {
            styleOverrides: {
                root: ({ theme }) => ({
                    '&.MuiButton-containedPrimary:hover': {
                        backgroundColor: theme.palette.primary.light,
                    },
                    '&.MuiButton-containedSecondary:hover': {
                        backgroundColor: theme.palette.secondary.light,
                    },
                }),
            },
        },
    }
material-ui reactjs
2 Answers

check the global component overide section for more details https://mui.com/customization/theme-components/#global-style-overrides

following code with give you start. here I have changed opacity on button hover state.

const theme = createTheme({
  // your other theme settings here
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          '&:hover': {
            opacity:0.5,
          },
        }),
      },
    },
  },
});
user_176200660

I customize it like so:

 const theme = createTheme({
  get components() {
    return {
      MuiButton: {
        styleOverrides: {
          root: ({ ownerState }) => ({
            '&:hover': {
              backgroundColor: this.palette[ownerState.color].light,
              transition: '0.2s',
            },
          }),
        },
      },
    }
  },
  palette: {
    primary: {
      main: '#3E4BA0',
      dark: '#313b7d',
      light: '#5664bd',
    },

  },

})
user_129649960
Related