'Material UI Typography - responsiveFontSize() does not apply on my new variants

I want to add new variants for subtitles in MUI Typography (with Typescript) according to the doc https://mui.com/customization/typography/#variants. I have declared my new variants in a global.d.ts file along with other customizations :

// global.d.ts
import * as styles from "@mui/material/styles";
import * as Typography from "@mui/material/Typography"
import React from "react";

declare module '@mui/material/styles' {
    interface Palette {
        accent: Palette['primary'];
    }
    interface PaletteOptions {
        accent: PaletteOptions['primary'];
    }
    interface PaletteColor {
        gradient?: string;
    }
    interface SimplePaletteColorOptions {
        gradient?: string;
    }
    interface TypeBackground {
        alternate: string,
    }


    interface TypographyVariants {
        subtitle3: React.CSSProperties;
        subtitle4: React.CSSProperties;
        subtitle5: React.CSSProperties;
        subtitle6: React.CSSProperties;
    }

    interface TypographyVariantsOptions {
        subtitle3?: React.CSSProperties;
        subtitle4?: React.CSSProperties;
        subtitle5?: React.CSSProperties;
        subtitle6?: React.CSSProperties;
    }
}

declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
        subtitle3: true;
        subtitle4: true;
        subtitle5: true;
        subtitle6: true;
    }
}

then i create my custom theme in a theme.ts file :

// theme.ts
import {createTheme, CSSObject} from "@mui/material";
import {Theme} from "@mui/material/styles/createTheme";

export const defaultTheme = createTheme();
console.log("MUI Default theme", defaultTheme);

const lfPalette = {
    primary: {
        light: '#ff946b',
        main: '#ff623e',
        dark: '#c52d12',
        contrastText: '#fff'
    },
    secondary: {
        light: '#6bdeff',
        main: '#13acf7',
        dark: '#007dc4',
        gradient: 'linear-gradient(10deg, #0093de 15%, #00a4f7 30%, #13acf7 100%)',
        contrastText: '#fff'
    },
    accent: {
        light: '#5a61a4',
        main: '#2a3775',
        dark: '#001249',
        contrastText: '#fff'
    },
    text: {
        primary: '#4E6174'
    },
    background : {
        alternate: '#f9fafb'
    }
};

const lfTypography = {
    fontFamily: [
        'Fira Sans Condensed',
        'Fira Sans',
        'Arial',
        'sans-serif',
    ].join(','),
    h1: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "2.875rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    h2: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "2.5rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    h3: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "2rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    h4: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "1.5rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    h5: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "1.25rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    h6: {
        fontFamily: "Fira Sans, Arial, sans-serif",
        fontWeight: 700,
        fontSize: "1rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle1: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "2.875rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle2: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "2.5rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle3: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "2rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle4: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "1.5rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle5: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "1.25rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    subtitle6: {
        fontFamily: "Fira Sans Condensed, Fira Sans, Arial, sans-serif",
        fontWeight: 500,
        fontSize: "1rem",
        lineHeight: 1.3,
        letterSpacing: "0.05rem"
    },
    body1: {
        fontFamily: "Fira Sans Condensed,Fira Sans,Arial,sans-serif",
        fontWeight: 400,
        fontSize: "1.25rem",
        lineHeight: 1.65,
        letterSpacing: 0
    },
    body2: {
        fontFamily: "Fira Sans Condensed,Fira Sans,Arial,sans-serif",
        fontWeight: 400,
        fontSize: "1rem",
        lineHeight: 1.65,
        letterSpacing: 0
    },
    button: {
        fontFamily: "Fira Sans Condensed,Fira Sans,Arial,sans-serif",
        fontWeight: 500,
        lineHeight: 1.3,
        textTransform: "none" as const
    },
    caption: {
        fontFamily: "Fira Sans Condensed,Fira Sans,Arial,sans-serif",
        fontWeight: 400,
        fontSize: "0.875rem",
        lineHeight: 1.65,
        letterSpacing: 0
    },
    overline: {
        fontFamily: "Fira Sans Condensed,Fira Sans,Arial,sans-serif",
        fontWeight: 400,
        fontSize: "0.875rem",
        lineHeight: 1.65,
        letterSpacing: 0,
        textTransform: "uppercase" as const
    },
};

const globalTheme = createTheme(
    {
        palette: lfPalette,
        typography: lfTypography,
        shape: {
            borderRadius: 15,
        }
    }
);

export const theme = createTheme(
    {
        components: {
            MuiTypography: {
                styleOverrides: {
                    root: ({ownerState, theme}) => ({
                        ...((ownerState.variant && ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "subtitle3", "subtitle4", "subtitle5", "subtitle6"].includes(ownerState.variant)) && {
                            color: theme.palette.accent.main,
                        }),
                    }),
                }
            }
        },
    },
    globalTheme
);

console.log("LF Theme", theme);

I then use my custom theme in my app (Next.js) or in my storybook with the responsiveFontSize(theme) which by default should use "all variants" but my new variants (subtitle3 to subtitle6) are not responsive.

// _app.js
import React from "react";
import Head from "next/head";
import CssBaseline from '@mui/material/CssBaseline';
import {responsiveFontSizes, ThemeProvider} from "@mui/material";
import {theme} from "../design-system/theme";

function MyApp({Component, pageProps}) {
    return (
        <ThemeProvider theme={responsiveFontSizes(theme)}>
            <Head>
                <meta name="viewport" content="initial-scale=1, width=device-width"/>
                <link rel="stylesheet"
                      href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700%7CFira+Sans+Condensed:400,500&display=swap"/>
            </Head>
            <CssBaseline/>
            <Component {...pageProps} />
        </ThemeProvider>
    );
}

export default MyApp;

Did I misunderstand how to add variants and the fact that responsiveFontSize() should apply to all variants (default ones and mine) or should I define responsive font sizes for my variants in my theme creation ?

Solution 1:^[1]

In the near future, MUI will deprecate the customization of variants. Here you have a link to a pull request in which they revert the deprecation message, as it is considered premature.
Instead, they recommend to use the customization based on props. Aside, it is what I would recommend, in order to reduce the changes you have to make on further updates.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mddg

'Material UI Typography - responsiveFontSize() does not apply on my new variants

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]