javascript 获取当前材质UI断点名称

2exbekwf  于 2023-10-14  发布在  Java
关注(0)|答案(5)|浏览(73)

我正在搜索一个MUI函数“MaterialUIGiveMeCurrentBreakPointName“,它允许我在这样的组件中执行一个操作:

const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName()

if(currentBreakPointName === 'myCustomBreakPointName') {
  // do stuff 
}

你能帮帮我吗?

vwoqyblh

vwoqyblh1#

目前还没有这样的函数可以返回当前断点名称,但是你可以使用useMediaQuery钩子来实现。

参考https://mui.com/material-ui/react-use-media-query/
Working codesandboxhttps://codesandbox.io/s/themehelper-demo-material-ui-forked-h2grmr?file=/demo.tsx

const theme = useTheme();
const greaterThanMid = useMediaQuery(theme.breakpoints.up("md"));
const smallToMid = useMediaQuery(theme.breakpoints.between("sm", "md"));
const lessThanSmall = useMediaQuery(theme.breakpoints.down("sm"));
if (greaterThanMid) {
  console.log("Greater than mid");
} else if (smallToMid) {
  console.log("Between small to mid");
} else if (lessThanSmall) {
  console.log("Less than small");
}

kse8i1jr

kse8i1jr2#

这里有一个定制的钩子,会适合你的需要。

import {
  Breakpoint,
  Theme,
  useMediaQuery,
  useTheme
} from '@mui/material/styles'

/**
 * taken from https://material-ui.com/components/use-media-query/#migrating-from-withwidth
 *
 * 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://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
 */
type BreakpointOrNull = Breakpoint | null

export const useWidth = (): Breakpoint => {
  const theme: Theme = useTheme()
  const keys: readonly Breakpoint[] = [...theme.breakpoints.keys].reverse()
  return (
    keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const matches = useMediaQuery(theme.breakpoints.up(key))
      return output != null && matches ? key : output
    }, null) ?? 'xs'
  )
}

使用

const breakpoint = useWidth()
oknwwptz

oknwwptz3#

一个简单的钩子,将与默认断点xs,sm,md,lg和xl一起工作。此钩子适用于material ui版本5.11.x。您可以使用更多与断点相关的函数来扩展它。例如,当与props一起使用而不是使用props.size时,您可以使用props[getBreakPointName()].size作为响应大小值。
useBreakpoint.js钩子

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

/**
 * useBreakpoint
 * 
 * @returns 
 */
const useBreakpoint = () => {

/**
 * useTheme
 */
const theme = useTheme();

/**
 * useMediaQuery
 * 
 */
const mq_xs = useMediaQuery(theme.breakpoints.only('xs'));
const mq_sm = useMediaQuery(theme.breakpoints.only('sm'));
const mq_md = useMediaQuery(theme.breakpoints.only('md'));
const mq_lg = useMediaQuery(theme.breakpoints.only('lg'));
const mq_xl = useMediaQuery(theme.breakpoints.only('xl'));

/**
 * getBreakPointName
 * 
 */
const getBreakPointName = () => {

    if(mq_xs){
        return "xs"
    }
    if(mq_sm){
        return "sm"
    }
    if(mq_md){
        return "md"
    }
    if(mq_lg){
        return "lg"
    }
    if(mq_xl){
        return "xl"
    }

}

return {
    getBreakPointName
}
}

export default useBreakpoint
bhmjp9jg

bhmjp9jg4#

对于em @Apoplectic的答案是不工作,所以我适应它。它仍然是一个定制的钩子。

import {Theme, useTheme } from '@mui/material/styles' // or @mui/joy/styles
import useMediaQuery from "@mui/material/useMediaQuery";
import {Breakpoint} from "@mui/system";

/**
 * taken from https://material-ui.com/components/use-media-query/#migrating-from-withwidth
 *
 * 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://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
 */
type BreakpointOrNull = Breakpoint | null

export const useWidth = (): Breakpoint => {
    const theme: Theme = useTheme()
    const keys: readonly Breakpoint[] = [...theme.breakpoints.keys]
    console.log(keys);
    return (
        keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
            // eslint-disable-next-line react-hooks/rules-of-hooks
            const matches = useMediaQuery(theme.breakpoints.up(key))
            return matches ? key : output
        }, null) ?? 'xs'
    )
}

使用

const breakpoint = useWidth()
ffscu2ro

ffscu2ro5#

它的工作与此代码,如果不想使用typescript只是删除类型。

const theme = useTheme();

const keys: readonly Breakpoint[] = [...theme.breakpoints.keys].reverse();

return (
   keys.filter((key: Breakpoint) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));

       if (matches) return true;
       return false;
   }, null)[0] ?? "xs"
);

相关问题