I am using MUI.

I want to know the currently used breakpoint, is it xs, sm, md,lg and so on.

does MUI provide a method for doing so?

maybe by doing:

import { useTheme } from '@mui/material'
const Component = () => {
  const theme = useTheme()
  console.log(theme.breakpoints.currentActiveBreakpoint) // lg
}

or maybe by doing:

import { useTheme } from '@mui/material'
const Component = () => {
  const theme = useTheme()
  console.log(theme.breakpoints.is('lg')) // true
}

Why?

I have a created component which takes a prop called oriantation, and I want to consume it like this:

<TabsPanelsLayout tabs={tabsList} oriantation={theme.breakpoints.isBetweenAndIncluding('xs', 'md') ? 'vertical' : 'horizintal'} />

which is important to render something either like this:

or like this: