How to use the @material-ui/core/useMediaQuery function in @material-ui/core

export default function IsPrinting({children}) {
  const printingMode = useMediaQuery('print');
//  useEffect(() => {
//
//    props.isPrinting(matches);
//  });

  return children(printingMode===false);
}

export default function VirtualizedList() {
    const { state, dispatch } = React.useContext(PhosPlayerContext)
    const { data, playlistName, artistName, albumName, filterBy, searchWord, searchType, showNowPlaylist, currentPlaylist } = state
    const classes = useStyles();
    let songlist = data.songs ? data.songs.rows : []

    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.down('sm'));

    const height = window.innerHeight - 185

    function playSongs() {
        // 播放第一首
        dispatch({
            type: 'playOneSong',
            payload: {
                song: songlist[0]
            }
        })
        dispatch({
            type: 'set',
            payload: {
                currentPlaylist: songlist
            }

function Receipt(props: WithStyles) {

  const [party, setParty] = React.useState(null);
  const [instance, setInstance] = React.useState(null);
  const [organisations, setOrganisations] = React.useState(null);
  const [application, setApplication] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [language, setLanguage] = React.useState(null);
  const [attachments, setAttachments] = React.useState(null);
  const [pdf, setPdf] = React.useState(null);
  const isPrint = useMediaQuery('print');

  const fetchParty = async () => {
    try {
      const response = await Axios.get(getPartyUrl());
      setParty(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const fetchApplication = async () => {
    try {
      const app = instance.appId.split('/')[1];
      const response = await Axios.get(getApplicationMetadataUrl(instance.org, app));
      setApplication(response.data);
    } catch (error) {

function Receipt(props: WithStyles) {
  const [party, setParty] = React.useState(null);
  const [instance, setInstance] = React.useState(null);
  const [organisations, setOrganisations] = React.useState(null);
  const [application, setApplication] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [language, setLanguage] = React.useState(null);
  const [attachments, setAttachments] = React.useState(null);
  const [textResources, setTextResources] = React.useState(null);
  const isPrint = useMediaQuery('print');

  const fetchInstanceAndParty = async () => {
    try {
      const response = await Axios.get(getExtendedInstanceUrl());
      setParty(response.data.party);
      setInstance(response.data.instance);
    } catch (error) {
      console.error(error);
    }
  };

  const fetchApplication = async () => {
    try {
      const app = instance.appId.split('/')[1];
      const response = await Axios.get(getApplicationMetadataUrl(instance.org, app));
      setApplication(response.data);

const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
  const { children, ...other } = props;
  const itemData = React.Children.toArray(children);
  const theme = useTheme();
  const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
  const itemCount = itemData.length;
  const itemSize = smUp ? 36 : 48;

  const getChildSize = child => {
    if (React.isValidElement(child) && child.type === ListSubheader) {
      return 48;
    }

    return itemSize;
  };

  const getHeight = () => {
    if (itemCount > 8) {
      return 8 * itemSize;
    }
    return itemData.map(getChildSize).reduce((a, b) => a + b, 0);

function handleMoveUp() {
    props.handleUpdate(page);
    props.handleMove(-1);
    handleClose();
  }

  function handleMoveDown() {
    props.handleUpdate(page);
    props.handleMove(+1);
    handleClose();
  }

  const classes = useStyles();
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <dialog aria-labelledby="responsive-dialog-title" open="">
      Edit Page
      
        </dialog>

export const AlertsEscalationDialog = ({ isOpened, close, alertId, isEscalating, isFetchingRecipients, escalateAlert, notificationEmails, notificationPhoneNumbers }) => {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  return (
    <dialog open="{isOpened}">
      {strings(stringKeys.alerts.assess.alert.escalateConfirmation)}
      
        {notificationEmails.length &gt; 0 &amp;&amp; (
          
            {notificationEmails.map(email =&gt; (
              <div>{email}</div>
            ))}
          
        )}

        {notificationPhoneNumbers.length &gt; 0 &amp;&amp; (
          
            {notificationPhoneNumbers.map(phoneNumber =&gt; (</dialog>

export const SendReportDialog = ({ close, props, sendReport }) => {
  const [form, setForm] = useState(null);
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'))
  dayjs.extend(utc);

  const dataCollectors = useSelector(state => state.reports.sendReport.dataCollectors.map(dc => ({ title: `${dc.name} / ${dc.phoneNumber}` })));
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const isSending = useSelector(state => state.reports.formSaving);

  useEffect(() => {
    const fields = {
      dataCollector: '',
      message: '',
      time: dayjs().format('HH:mm')
    };

    const validation = {
      dataCollector: [validators.required],
      message: [validators.required],

export const ConfirmationDialogComponent = ({ children, isOpened, isFetching, close, submit, titleText, contentText }) => {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  return (
    <dialog open="{isOpened}">
      
        {titleText}
      
      
        {contentText &amp;&amp;
          
            {contentText}
          
        }
        {children}
        
          <button>
            {strings(stringKeys.form.cancel)}</button></dialog>

handleClose();
    props.handleUpdate(group);
  }

  const handleChange = (name: string) => (
    event: React.ChangeEvent
  ) => {
    setGroup({
      ...group,
      [name]: typeof event === 'string' ? event : event.target.value
    });
  };

  const classes = useStyles();
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <dialog aria-labelledby="responsive-dialog-title" open="">
      Edit Group
      
        </dialog>