1.使用方法

  1. import useResponsive from '../../hooks/useResponsive';
  3. const smUp = useResponsive('up', 'sm');
  4. const mdUp = useResponsive('up', 'md');
  7. function(){
  8.  return (
  9.            {smUp && (
  10.               <Typography variant="body2" sx={{ mt: { md: -2 } }}>
  11.                 Don’t have an account? {''}
  12.                 <NextLink href={PATH_AUTH.register} passHref>
  13.                   <Link variant="subtitle2">Get started</Link>
  14.                 </NextLink>
  15.               </Typography>
  16.             )}
  17.           </HeaderStyle>
  18.           {mdUp && (
  19.             <LoginLeft/>
  20.           )}
  22.                {!smUp && (
  23.                 <Typography variant="body2" align="center" sx={{ mt: 3 }}>
  24.                   Don’t have an account?{' '}
  25.                   <NextLink href={PATH_AUTH.register} passHref>
  26.                     <Link variant="subtitle2">Get started</Link>
  27.                   </NextLink>
  28.                 </Typography>
  29.               )}
  31.  )
  33. }

2.根据mui封装的hook

  1. hooks/useResponsive
  4. import { Breakpoint } from '@mui/material';
  5. import { useTheme } from '@mui/material/styles';
  6. import useMediaQuery from '@mui/material/useMediaQuery';
  8. // ----------------------------------------------------------------------
  10. type Query = 'up' | 'down' | 'between' | 'only';
  11. type Key = Breakpoint | number;
  12. type Start = Breakpoint | number;
  13. type End = Breakpoint | number;
  15. export default function useResponsive(query: Query, key?: Key, start?: Start, end?: End) {
  16.   const theme = useTheme();
  18.   const mediaUp = useMediaQuery(theme.breakpoints.up(key as Key));
  20.   const mediaDown = useMediaQuery(theme.breakpoints.down(key as Key));
  22.   const mediaBetween = useMediaQuery(theme.breakpoints.between(start as Start, end as End));
  24.   const mediaOnly = useMediaQuery(theme.breakpoints.only(key as Breakpoint));
  26.   if (query === 'up') {
  27.     return mediaUp;
  28.   }
  30.   if (query === 'down') {
  31.     return mediaDown;
  32.   }
  34.   if (query === 'between') {
  35.     return mediaBetween;
  36.   }
  38.   if (query === 'only') {
  39.     return mediaOnly;
  40.   }
  41. }

3.Mui官网关于useMediaQuery的描述

监听与 CSS 媒体查询的匹配的内容https://mui.com/zh/components/use-media-query/

在项目中是结合了另外两个Api….暂时没看