我正在搜索一个MUI函数“MaterialUIGiveMeCurrentBreakPointName
“,它允许我在这样的组件中执行一个操作:
const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName()
if(currentBreakPointName === 'myCustomBreakPointName') {
// do stuff
}
你能帮帮我吗?
我正在搜索一个MUI函数“MaterialUIGiveMeCurrentBreakPointName
“,它允许我在这样的组件中执行一个操作:
const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName()
if(currentBreakPointName === 'myCustomBreakPointName') {
// do stuff
}
你能帮帮我吗?
5条答案
按热度按时间vwoqyblh1#
目前还没有这样的函数可以返回当前断点名称,但是你可以使用
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
kse8i1jr2#
这里有一个定制的钩子,会适合你的需要。
使用
oknwwptz3#
一个简单的钩子,将与默认断点xs,sm,md,lg和xl一起工作。此钩子适用于material ui版本5.11.x。您可以使用更多与断点相关的函数来扩展它。例如,当与props一起使用而不是使用props.size时,您可以使用props[getBreakPointName()].size作为响应大小值。
useBreakpoint.js钩子
bhmjp9jg4#
对于em @Apoplectic的答案是不工作,所以我适应它。它仍然是一个定制的钩子。
使用
ffscu2ro5#
它的工作与此代码,如果不想使用typescript只是删除类型。