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

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

CodePudding user response：

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