如何结合媒体查询动态设置Material UI组件props

针对你需要在屏幕宽度小于600px时把Typography的variant从h1切换为h5的需求，有两种常用实现方式，按需选择即可：

方法1：直接使用属性断点对象（最简推荐） #

MUI v5 原生支持所有组件核心props接收断点映射对象，框架会自动根据当前屏幕宽度匹配对应值，完全不需要手写媒体查询逻辑：

import Typography from '@mui/material/Typography';

export default function PageTitle() {
  return (
    <Typography 
      // xs对应<600px屏幕，sm及以上（≥600px）用h1
      variant={{ xs: 'h5', sm: 'h1' }}
    >
      页面标题
    </Typography>
  );
}

MUI默认断点规则：xs为0-599.95px、sm为600-899.95px，刚好匹配你的尺寸要求；如果你自定义过主题breakpoints，这里的断点标识会自动匹配你设置的阈值。

方法2：结合useMediaQuery钩子动态传值（适合复杂逻辑场景） #

如果你需要在切换属性时叠加其他业务判断，可以用官方提供的useMediaQuery钩子监听媒体查询状态，动态给props赋值，和你之前用style hook写媒体查询的逻辑一致：

import { Typography, useTheme, useMediaQuery } from '@mui/material';

export default function PageTitle() {
  const theme = useTheme();
  // 匹配宽度小于600px的场景
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Typography variant={isMobile ? 'h5' : 'h1'}>
      页面标题
    </Typography>
  );
}

如果需要自定义媒体查询规则，也可以直接给useMediaQuery传媒体查询字符串，比如useMediaQuery('(max-width:600px)')效果完全一致。

内容的提问来源于stack exchange，提问作者Lakruwan Pathirage