?? ? ??????? ??? ? ?? ?? ???? ???? ???? ??? ???? ??? ?? ??? ???? ???? ?????. ?? ???? ?? ??? ??? ? ???? ??? ??? ???? ????. useBreakpoints ??? ???? ????! ???? ??? ???? ??? ???? ??? ?? ? ??? ???? ??? ?????.

useBreakpoints??? ??????

useBreakpoints ??? Material-UI? useTheme ? useMediaQuery ??? ???? ??? ?? React ?????. ?? ?? ??? ????? ???? ??? ????? ???? ?????? ?? ??? ???? ??? ?? ??? ??? ? ????.

? useBreakpoints? ??????

1. ??? ?? ??: ??? ? ???? ???? ?? ?????? ?????? ?? ??? ??? ??? ?? ? ????. ??? ???? ???? ???? ????, ???? ???? ?? ??? ????? ?? ? ????.
2. ? ??? ??: CSS ??? ? ?? ??? ??? ?? ? ?? ????. useBreakpoints??? ???? ?? ???? ?? ??? ?? ??? ? ???? ??? ? ?? ?? ?? ??? ? ????.
3. ?? ??? ??: ?? ?? ??? ??? ???? ?????? ???? ??? ??? ??? ?????? ??? ?? ? ????.
4. ???? ???: ????? useBreakpoints ??? ???? ???? ???? ??? ??? ??? ???? ? ??? ? ? ????.

useBreakpoints??

??? React ???????? useBreakpoints ??? ???? ???? ??? ?? ?? ??????.

1??: ?? ??

?? Material-UI? useTheme ? useMediaQuery? ???? ??? ?? ??? ??? ?? ??? ?????.

import { useMediaQuery, useTheme } from '@mui/material';

/**
 * 自定義鉤子，根據(jù)主題獲取斷點(diǎn)的當(dāng)前狀態(tài)。
 */
export const useBreakpoints = () => {
  const theme = useTheme();

  const isMd = useMediaQuery(theme.breakpoints.only('md'));

  return {
    isMd,
  };
};

2??: ?? ??

?? ?? ???? useBreakpoints ??? ???? ??? ? ???? ????? ??? ????? ?????. ?? ?? Material-UI ?? ??? ???? ??? ???? ??? ???? ???? ???? ??? ? ????.

import React from 'react';
import { useBreakpoints } from '/Users/jack/Work/SGInnovate/frontend/packages/shared/ui/utils/breakpoints';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, List, ListItem, Paper } from '@mui/material';

const ResponsiveComponent = () => {
  const { isMdDown } = useBreakpoints();

  const data = [
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' },
    { id: 3, name: 'Item 3', value: 'Value 3' },
  ];

  return (
    <div>
      {isMdDown ? (
        <List>
          {data.map((item) => (
            <ListItem key={item.id}>{item.name}: {item.value}</ListItem>
          ))}
        </List>
      ) : (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Value</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.name}</TableCell>
                  <TableCell>{item.value}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </div>
  );
};

export default ResponsiveComponent;

?????! useBreakpoints ??? ???? ???? ???? ??? ???? ??????? ?? ?? ? ????.

??

useBreakpoints??? React?? ??? ???? ? ?? ??? ? ?? ??? ?????? ??? ?????. ??? ?? ??? ?? UI? ??? ???? ??? ???? ?? ???? ?? ????? ???? ?? ??? ??? ?? ? ????. ??? ? ??????? ???? ??? ? ???? ???? ? ??? ???? ???? ??? ???? ? ??? ? ? ????. ??? ?? ????? ?? ????? ??? ????? ??? ???!

? ??? useBreakpoints? ???? React? ??? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!