目前还没有这样的函数可以返回当前断点名称，但是你可以使用useMediaQuery钩子来实现。

参考：https://mui.com/material-ui/react-use-media-query/
Working codesandbox：https://codesandbox.io/s/themehelper-demo-material-ui-forked-h2grmr?file=/demo.tsx

const theme = useTheme();
const greaterThanMid = useMediaQuery(theme.breakpoints.up("md"));
const smallToMid = useMediaQuery(theme.breakpoints.between("sm", "md"));
const lessThanSmall = useMediaQuery(theme.breakpoints.down("sm"));
if (greaterThanMid) {
  console.log("Greater than mid");
} else if (smallToMid) {
  console.log("Between small to mid");
} else if (lessThanSmall) {
  console.log("Less than small");
}

这里有一个定制的钩子，会适合你的需要。

import {
  Breakpoint,
  Theme,
  useMediaQuery,
  useTheme
} from '@mui/material/styles'
/**
 * taken from https://material-ui.com/components/use-media-query/#migrating-from-withwidth
 *
 * Be careful using this hook. It only works because the number of
 * breakpoints in theme is static. It will break once you change the number of
 * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
 */
type BreakpointOrNull = Breakpoint | null
export const useWidth = (): Breakpoint => {
  const theme: Theme = useTheme()
  const keys: readonly Breakpoint[] = [...theme.breakpoints.keys].reverse()
  return (
    keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const matches = useMediaQuery(theme.breakpoints.up(key))
      return output != null && matches ? key : output
    }, null) ?? 'xs'
  )
}

使用

const breakpoint = useWidth()

一个简单的钩子，将与默认断点xs，sm，md，lg和xl一起工作。此钩子适用于material ui版本5.11.x。您可以使用更多与断点相关的函数来扩展它。例如，当与props一起使用而不是使用props.size时，您可以使用props[getBreakPointName（）].size作为响应大小值。
useBreakpoint.js钩子

import { useMediaQuery, useTheme } from "@mui/material";
/**
 * useBreakpoint
 * 
 * @returns 
 */
const useBreakpoint = () => {
/**
 * useTheme
 */
const theme = useTheme();
/**
 * useMediaQuery
 * 
 */
const mq_xs = useMediaQuery(theme.breakpoints.only('xs'));
const mq_sm = useMediaQuery(theme.breakpoints.only('sm'));
const mq_md = useMediaQuery(theme.breakpoints.only('md'));
const mq_lg = useMediaQuery(theme.breakpoints.only('lg'));
const mq_xl = useMediaQuery(theme.breakpoints.only('xl'));
/**
 * getBreakPointName
 * 
 */
const getBreakPointName = () => {
    if(mq_xs){
        return "xs"
    }
    if(mq_sm){
        return "sm"
    }
    if(mq_md){
        return "md"
    }
    if(mq_lg){
        return "lg"
    }
    if(mq_xl){
        return "xl"
    }
}
return {
    getBreakPointName
}
}
export default useBreakpoint

对于em @Apoplectic的答案是不工作，所以我适应它。它仍然是一个定制的钩子。

import {Theme, useTheme } from '@mui/material/styles' // or @mui/joy/styles
import useMediaQuery from "@mui/material/useMediaQuery";
import {Breakpoint} from "@mui/system";
/**
 * taken from https://material-ui.com/components/use-media-query/#migrating-from-withwidth
 *
 * Be careful using this hook. It only works because the number of
 * breakpoints in theme is static. It will break once you change the number of
 * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
 */
type BreakpointOrNull = Breakpoint | null
export const useWidth = (): Breakpoint => {
    const theme: Theme = useTheme()
    const keys: readonly Breakpoint[] = [...theme.breakpoints.keys]
    console.log(keys);
    return (
        keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
            // eslint-disable-next-line react-hooks/rules-of-hooks
            const matches = useMediaQuery(theme.breakpoints.up(key))
            return matches ? key : output
        }, null) ?? 'xs'
    )
}

使用

const breakpoint = useWidth()

它的工作与此代码，如果不想使用typescript只是删除类型。

const theme = useTheme();
const keys: readonly Breakpoint[] = [...theme.breakpoints.keys].reverse();
return (
   keys.filter((key: Breakpoint) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));
       if (matches) return true;
       return false;
   }, null)[0] ?? "xs"
);