[material-ui][Typography] Enforce responsive typography type checking in `sx` prop

Summary

Here the typography shorthand has a string type as it's later being spread into the element.

We use responsive typography as in the following example:

<Typography
  sx={{
    typography: {
      xs: 'Body S',
      sm: 'Body M',
      md: 'any string is valid here',
    },
  }}
>
  The size of this text changes based on the screen size. Check it out! <br />
  In most cases, we will reuse the same typography variant across breakpoints. But
  in case you need to override it, refer to the code in this example.
</Typography>

and there's no way for TypeScript to catch the types inconsistency early in the process.

I tried a bunch of things to redeclare typography prop but with no luck. E.g.:

// attempt 1
declare module '@mui/system' {
  interface SxProps<Theme = MUITheme> extends MUISxProps<Theme> {
    typography?: {
      [key in Breakpoint]?: FlashPackTypographyVariant;
    } | FlashPackTypographyVariant;
  }
}

// attempt 2
declare module '@mui/system' {
  interface TypographyPropsVariantOverrides {
    // Your custom typography variants (as before)
  }

  interface AliasesCSSProperties {
    // Add your custom property here
    typography?: {
      [key in Breakpoint]?: FlashPackTypographyVariant;
    } | FlashPackTypographyVariant;
  }

  // This ensures the custom property is recognized in the theme
  interface ThemeOptions {
    typography?: TypographyOptions | ((theme: Theme) => TypographyOptions);
  }
}

// attempt 3
declare module '@mui/material/styles' {
  interface CSSProperties {
    typography?: {
      [key in Breakpoint]?: FlashPackTypographyVariant;
    } | FlashPackTypographyVariant;
  }
}

I'd love to get some tips if there's a way to override typography in this case!

Examples

No response

Motivation

No response

Search keywords: typography, typescript, override, generic