获取当前材质 UI 断点名称

Question

我正在搜索一个 MUI 函数“ MaterialUIGiveMeCurrentBreakPointName”，它允许我在组件中执行如下操作：

const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName()

if(currentBreakPointName === 'myCustomBreakPointName') {
  // do stuff 
}

你能帮我一下吗？

Answer 1

目前没有这样的函数可以返回当前断点名称，但您可以使用useMediaQuery钩子来实现这一点。
参考： https: //mui.com/material-ui/react-use-media-query/
工作代码andbox：https://codesandbox.io/s/themehelper-demo-material-ui-forked-h2grmr?file =/演示.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");
}