/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/use-media-query/UseWidth.js
35 строк
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; /** * Be careful using this hook. It only works because the number of * breakpoints in theme is static. It will break once you change the number of * breakpoints. See https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); return ( keys.reduce((output, key) => { // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useMediaQuery is called inside callback // eslint-disable-next-line react-hooks/rules-of-hooks const matches = useMediaQuery(theme.breakpoints.up(key)); return !output && matches ? key : output; }, null) || 'xs' ); } function MyComponent() { const width = useWidth(); return <span>{`width: ${width}`}</span>; } const theme = createTheme(); export default function UseWidth() { return ( <ThemeProvider theme={theme}> <MyComponent /> </ThemeProvider> ); }