Material UI Typography -responsiveFontSize() 不适用于我的新变体

Question

我想根据文档 https:// 在 MUI Typography（使用 Typescript）中添加新的字幕变体mui.com/customization/typography/#variants。我已在 global.d.ts 文件中声明了我的新变体以及其他自定义内容：

// 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;
    }
}

然后我在 theme.ts 文件中创建自定义主题：

// 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);

然后使用我的我的应用程序 (Next.js) 中的自定义主题或带有responsiveFontSize(theme) 的故事书中的自定义主题默认情况下应使用“所有变体”，但我的新变体（subtitle3 到 subtitle6）不响应。

// _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;

我是否误解了如何添加变体以及responsiveFontSize()应该适用于所有变体（默认变体和我的变体）的事实，或者我应该在主题创建中为我的变体定义响应式字体大小？

Answer 1

在不久的将来，MUI 将弃用变体的定制。 这里您有一个指向拉取请求的链接，其中他们恢复了弃用消息，因为它被认为是不成熟的。
相反，他们建议使用基于 props 的自定义 。除此之外，这是我建议的，以减少您在进一步更新时必须做出的更改。