An example of extending the MUI style utility functions and a custom theme

mui-style-utils.ts

import {createStyled} from '@mui/system';
import {useTheme} from '@mui/material';
import type { MuiCustomThemeT } from './types';

export const muiStyled = createStyled<MuiCustomThemeT>();
export const muiUseTheme = useTheme<MuiCustomThemeT>();

mui-theme.ts

import type { MuiCustomThemeT, TokenCornerRadiusT } from './types';

const tokens = {
  "corner-radius": {
    default: "8px"
  },
};

const reduceTokens = <T>(tokens: Record<string, string>): T => {
    return {
        ...(Object.entries(tokens).reduce(
            (acc, [k, v]) => ({
                ...acc,
                [k]: v
            }),
            {}
        ) as T)
    };
};

const getTokensBase = (): Pick<MuiCustomThemeT, 'cornerRadius'> => {
    return {
        cornerRadius: reduceTokens<TokenCornerRadiusT>(tokens['corner-radius'])
    };
};

export const MuiTheme = createTheme({
  palette: {
    mode: 'light'
  },
  ...getTokensBase(),
  colors: getLightColors()
});

types.ts

import type { Theme as MuiTheme } from '@mui/material';

export type TokenCornerRadiusT = {
  default: string;
};

export type MuiCustomThemeT = MuiTheme & {
  cornerRadius: TokenCornerRadiusT;
};