Estoy buscando una función MUI " MaterialUIGiveMeCurrentBreakPointName
" que me permita realizar una acción en un componente como este:
const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName() if(currentBreakPointName === 'myCustomBreakPointName') { // do stuff }
¿Podrías ayudarme por favor?
Actualmente no existe tal función disponible que le devuelva el nombre del punto de interrupción actual, pero puede lograrlo usando useMediaQuery
hook.
Consulte : https://mui.com/material-ui/react-use-media-query/
Códigos y caja de trabajo : 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"); }