title: Using theme palette colors in custom MUI button variant
body: <p>I've got a MUI 5 button variant that I'd like to use existing theme palette colors on. I've got my <code>appTheme.ts</code> set up like this:</p>
  <pre><code>import { createTheme, Theme } from '@mui/material/styles';
  import { alpha } from '@mui/material/styles';
  
  declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
      light: true;
    }
  }
  
  export const theme: Theme = createTheme({
    palette: {
      primary: {
        main: 'black',
        light: 'white',
      },
      secondary: {
        main: 'gray',
        light: 'white',
      },
      info: {
        main: 'white',
      },
      warning: {
        main: 'red',
      },
    },
    typography: {
      fontFamily: 'Lato',
    },
    components: {
      MuiButton: {
        variants: [
          {
            props: { variant: 'light', color: 'primary' },
            style: {
              textTransform: 'none',
              border: 'none',
              backgroundColor: 'primary.light',
              color: 'primary',
              borderRadius: 8,
              '&amp;:hover': {
                backgroundColor: alpha('primary.main', 0.16),
                '&amp;:active': {
                  backgroundColor: alpha('primary.main', 0.32),
                },
              },
            },
          },
        ],
      },
    },
  });
  </code></pre>
  <p>This works, except for the <code>&amp;:hover</code> state properties, which don't know anything about the theme declaration, and so thus errors with <code>MUI: Unsupported 'primary.main' color.</code></p>
  <p>Is there a way I can use the theme colors like this inside of the theme declaration, or am I stuck overriding it at the theme wrapper level? I swear I saw this in some documentation somewhere, but can't find it.</p>