typescript - Beste måte å typisere "makeStyles"

Jeg vet at dette API-et er foreldet/legacy, men jeg er virkelig nysgjerrig på hva som er den beste måten å typifisere denne funksjonen/nytteprogrammet på for å gi typen for props når man bruker funksjonsverdi-callbacks-signatur for å definere egenskaper:

import { createTheme } from '@mui/material';
import { makeStyles } from '@mui/styles';

interface ThemeProps {
  alignItems: boolean;
  themeVersion: 'primary' | 'secondary'
}

const appTheme = createTheme();

const useStyles = makeStyles((theme: typeof appTheme) => {
  return {
    mainContainer: ({ alignItems }: ThemeProps) => ({
      alignItems: alignItems ? 'center' : '',
      height: '100%',
      padding: theme.spacing(2),
    }),
    subContainer: {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: ({ themeVersion }: ThemeProps) =>
        themeVersion === 'secondary'
          ? theme.palette.secondary.main
          : theme.palette.primary.main,
    },
  };
});

Dette fungerer helt fint, men jeg vil gjerne definere typene helt i begynnelsen for å slippe å spesifisere typen til propene hver gang jeg bruker en funksjonsverdi:

const useStyles = makeStyles<typeof appTheme, ThemeProps>(theme => {
  return {
    mainContainer: ({ alignItems }) => ({
      alignItems: alignItems ? 'center' : '',
      height: '100%',
      padding: theme.spacing(2),
    }),
    subContainer: {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: ({ themeVersion }) =>
        themeVersion === 'secondary'
          ? theme.palette.secondary.main
          : theme.palette.primary.main,
    },
  };
});

problemet her er at returtypen til useStyles ikke lenger er det jeg trenger, i stedet for å være ClassNameMap<"mainContainer" | "subContainer">, er verdien den er «standardisert» til ClassNameMap<string>.

Noen idé om hvordan man kan få det til å fungere uten å måtte ty til noe som

makeStyles<typeof appTheme, ThemeProps, 'mainContainer' | 'subContainer'>