如何获取Material UI当前生效的响应式断点名称？

MUI 没有提供你命名的MaterialUIGiveMeCurrentBreakPointName这类直接返回当前断点名的开箱即用API，但是基于官方内置的主题Hook和媒体查询Hook，几行代码就能封装出完全符合使用预期的函数，默认断点、自定义断点都能完美支持。

功能封装代码 #

封装逻辑完全对齐MUI内部的断点匹配规则，优先命中符合宽度条件的最大断点，和组件样式的断点表现完全一致：

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

const MaterialUIGiveMeCurrentBreakPointName = () => {
  const theme = useTheme();
  // 按断点宽度从大到小排序，过滤非数值型的断点配置
  const sortedBreakpointKeys = Object.keys(theme.breakpoints.values)
    .filter(key => typeof theme.breakpoints.values[key] === 'number')
    .sort((prev, next) => theme.breakpoints.values[next] - theme.breakpoints.values[prev]);

  for (const breakpointName of sortedBreakpointKeys) {
    const isMatch = useMediaQuery(theme.breakpoints.up(breakpointName));
    if (isMatch) return breakpointName;
  }

  // 兜底返回最小断点
  return 'xs';
};

使用方式 #

和你预期的写法完全一致，注意这个函数是基于React Hook实现的，只能在组件函数顶层或者其他自定义Hook里调用，不能在组件外、条件分支、循环里调用：

const BusinessComponent = () => {
  const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName()

  if(currentBreakPointName === 'myCustomBreakPointName') {
    // 执行自定义断点对应的业务逻辑
  }

  return (
    <div>业务组件内容</div>
  )
}

注意点 #

• 只要你在createTheme初始化主题的时候，把自定义断点（比如例子里的myCustomBreakPointName）配置到theme.breakpoints.values里，封装的函数就能自动识别，不需要额外修改逻辑。
• 断点匹配结果和MUI的sx属性、styledAPI里写的断点样式表现完全一致，不会出现逻辑判断和样式断点错位的问题。
• 如果需要做服务端渲染，只要给useMediaQuery配置好对应的SSR匹配参数即可，封装逻辑不需要改动。

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