title: How can I change MUI v5 Button to lighten on hover instead of darken using theme?
body: <p>I have setup my theme as outlined in the docs.</p>
  <pre><code>palette: {
      primary: {
          main: customColor
      }
  }
  </code></pre>
  <p>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?</p>
  <p>Update:
  Based on Prashant Jangam's answer I was able to get everything exactly as I needed it. See code below:</p>
  <pre><code>components: {
          MuiButton: {
              styleOverrides: {
                  root: ({ theme }) =&gt; ({
                      '&amp;.MuiButton-containedPrimary:hover': {
                          backgroundColor: theme.palette.primary.light,
                      },
                      '&amp;.MuiButton-containedSecondary:hover': {
                          backgroundColor: theme.palette.secondary.light,
                      },
                  }),
              },
          },
      }
  </code></pre>