Tengo una variante de botón MUI 5 en la que me gustaría usar los colores de la paleta de temas existente. Tengo mi appTheme.ts configurado así:

 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, '&:hover': { backgroundColor: alpha('primary.main', 0.16), '&:active': { backgroundColor: alpha('primary.main', 0.32), }, }, }, }, ], }, }, });

Esto funciona, excepto por las propiedades de estado &:hover , que no saben nada sobre la declaración del tema, y por lo tanto, errores con MUI: Unsupported 'primary.main' color.

¿Hay alguna manera de que pueda usar los colores del tema de esta manera dentro de la declaración del tema, o estoy atascado anulándolo en el nivel del envoltorio del tema? Juro que vi esto en alguna documentación en alguna parte, pero no puedo encontrarlo.