如何实现MUI 6 Typography的fontSize响应式？

你之前的写法无效是因为MUI主题系统不支持直接在typography根对象中添加媒体查询属性。要实现全局fontSize的响应式效果，有两种可靠的方法：

方法一：使用官方responsiveFontSizes工具函数（推荐） #

MUI提供了responsiveFontSizes工具，能自动为所有Typography变体生成响应式字号，基于你设置的全局基准字号进行缩放，无需手动写媒体查询：

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

// 先创建基础主题
let theme = createTheme({
  typography: {
    fontFamily: [
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    fontSize: 12, // 设置全局基础字号
  },
});

// 生成响应式字号，自动适配不同屏幕尺寸
theme = responsiveFontSizes(theme);

export default theme;

你还可以通过传递配置参数自定义缩放规则，比如指定断点范围、缩放比例等：

theme = responsiveFontSizes(theme, {
  breakpoints: ['sm', 'md', 'lg'],
  factor: 2, // 缩放因子，值越大响应式变化越明显
});

方法二：手动覆盖Typography组件根样式 #

如果需要更精细的控制，可以直接在主题中覆盖Typography组件的根样式，利用MUI的断点工具定义不同屏幕下的字号：

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

export const theme = createTheme({
  typography: {
    fontFamily: [
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    fontSize: 12, // 默认基础字号
  },
  components: {
    MuiTypography: {
      styleOverrides: {
        root: ({ theme }) => ({
          // 屏幕宽度≥600px（sm断点）时的字号
          [theme.breakpoints.up('sm')]: {
            fontSize: '14px',
          },
          // 屏幕宽度≥900px（md断点）时的字号
          [theme.breakpoints.up('md')]: {
            fontSize: '16px',
          },
        }),
      },
    },
  },
});

这种方式可以针对全局Typography组件设置统一的响应式规则，也可以单独为特定变体（如h1、body1）设置不同的响应式样式。

内容的提问来源于stack exchange，提问作者Poorya M