如何在Material UI自定义主题的Typography中添加断点？

在使用Material UI + React开发单页应用时，遇到小屏幕适配问题。目前需要给每个文本组件单独添加fontSize: { xs: '30px', md: '56px' }实现响应式字体，希望能在自定义主题中统一配置该规则，但尝试过相关方案后未生效。当前自定义主题代码如下：

const theme = createTheme({
    palette: {
        mode: 'light',
        primary: {
            main: '#3f51b5',
            button: {
                bgColor: colors.buttonBgColor,
                borderColor: colors.buttonBgColor,
                hoverColor: colors.white
            },
            navBar: {
                topBarBgColor: colors.white
            }
        }
    },
    typography: {
        allVariants: { color: colors.black },
        fontFamily: roboto.style.fontFamily,
        hoverColor: colors.buttonBgColor,
        white: colors.white,
        h1: {
            fontSize: '56px',
            fontWeight: 600
        },
        h6: {
            fontSize: '17px',
            color: '#505556'
        },
        subtitle2: {
            fontSize: '17px',
            fontWeight: 400
        }
    }
});

export default theme;

方法1：直接在主题Typography变体中配置响应式字体 #

Material UI v5及以上版本支持直接给Typography变体的fontSize传入带断点的对象，你可以直接修改主题对应配置：

import { createTheme } from '@mui/material/styles';
import roboto from '@fontsource/roboto';
import colors from './your-colors-file'; // 替换为你的颜色文件路径

const theme = createTheme({
    palette: {
        mode: 'light',
        primary: {
            main: '#3f51b5',
            button: {
                bgColor: colors.buttonBgColor,
                borderColor: colors.buttonBgColor,
                hoverColor: colors.white
            },
            navBar: {
                topBarBgColor: colors.white
            }
        }
    },
    typography: {
        allVariants: { color: colors.black },
        fontFamily: roboto.style.fontFamily,
        // 移除Typography标准配置外的属性，避免干扰主题解析
        h1: {
            fontSize: {
                xs: '30px',
                md: '56px'
            },
            fontWeight: 600
        },
        h6: {
            fontSize: '17px', // 如需响应式也可改为断点对象形式
            color: '#505556'
        },
        subtitle2: {
            fontSize: '17px',
            fontWeight: 400
        }
    }
});

export default theme;

方法2：用responsiveFontSizes工具统一生成响应式字体 #

如果需要快速给所有Typography变体添加响应式缩放效果，可使用Material UI提供的工具函数：

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import roboto from '@fontsource/roboto';
import colors from './your-colors-file';

let theme = createTheme({
    palette: {
        mode: 'light',
        primary: {
            main: '#3f51b5',
            button: {
                bgColor: colors.buttonBgColor,
                borderColor: colors.buttonBgColor,
                hoverColor: colors.white
            },
            navBar: {
                topBarBgColor: colors.white
            }
        }
    },
    typography: {
        allVariants: { color: colors.black },
        fontFamily: roboto.style.fontFamily,
        h1: {
            fontSize: '56px',
            fontWeight: 600
        },
        h6: {
            fontSize: '17px',
            color: '#505556'
        },
        subtitle2: {
            fontSize: '17px',
            fontWeight: 400
        }
    }
});

// 自定义断点和缩放幅度，生成响应式字体
theme = responsiveFontSizes(theme, {
    breakpoints: ['xs', 'md'],
    factor: 2 // 控制缩放比例，按需调整
});

export default theme;

未生效排查要点 #

• 确认应用已通过ThemeProvider正确包裹主题：

import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

function App() {
    return (
        <ThemeProvider theme={theme}>
            {/* 应用组件内容 */}
        </ThemeProvider>
    );
}

• 若使用Material UI v4版本，需改用断点函数写法：

h1: {
    fontSize: '30px',
    [theme.breakpoints.up('md')]: {
        fontSize: '56px'
    }
}

• 检查组件内是否有内联样式覆盖主题配置，优先级：内联样式 > 组件props > 主题配置。

内容的提问来源于stack exchange，提问作者karan siddhu