material-ui 的媒体查询(手机端和PC端)

• useMediaQuery是 React 的 CSS 媒体查询 （Media queries）hook
• 它监听与 CSS 媒体查询的匹配的内容。
• 它允许根据查询的结果是否匹配来渲染组件

官网介绍：https://mui.com/zh/components/use-media-query/#main-content

简单的媒体查询

应该将媒体查询提供给 hook 作为第一个参数。 媒体查询的字符串可以是任何有效的 CSS 媒体查询：

import * as React from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}

页面显示：

(min-width:600px) matches: true

★ 判断屏幕大小，来确定是手机端还是PC端：

const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));