Material UI media queries base on container size - reactjs

Question

I have stared investigate MUI lates version and I see that responsive brake points and all other stuff are base screen size.
But we are developing some kind of dashboard as reusable component. And I want to use default Material-ui responsivness, I like how we can in MUI component define override base on breakpoints.
But our Dashboard component and its breakpoints will work just if whole component will be rendered in IFRAME.
Its way in MUI how to solve this problem? Or use somehow container queries?
Finally I thinking about to override MUI theme brake points in container scope base on size of parent container and its size.
Can you point me to solution?
Override of brakepoints could be done like following code but I am afraid about performance.
import React from "react";
import { MuiThemeProvider, createMuiTheme } from "#material-ui/core/styles";
import HeaderComponent from "./header";
import "./App.css";
const values = {
xs: 0,
sm: 426,
md: 960,
lg: 1280,
xl: 1920
};
// here I can do some calculation base on element size
const theme = createMuiTheme({
palette: {
primary: {
main: "#000000"
},
secondary: {
main: "#9f9f9f"
}
},
breakpoints: {
keys: ["xs", "sm", "md", "lg", "xl"],
up: (key) => `#media (min-width:${values[key]}px)`
}
});
function Dashboard() {
return (
<MuiThemeProvider theme={theme}> // define cope theme provider
<div>
<HeaderComponent></HeaderComponent>
</div>
</MuiThemeProvider>
);
}
export default App;
Thanks for your help

Answer 1

The best result for me was something like this:
import { useCallback, useState } from 'react';
import { useEffect, useLayoutEffect } from 'react';
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export enum SizeTo {
DOWN_TO = 'downTo',
UP = 'up',
}
const getMatches = (el: HTMLElement | null | undefined, size: number, option: SizeTo): boolean => {
// Prevents SSR issues
if (typeof window !== 'undefined' && el) {
if (option === SizeTo.DOWN_TO) {
return el.offsetWidth <= size;
}
return el.offsetWidth > size;
}
return false;
};
function useContainerMediaQuery<T extends HTMLElement = HTMLDivElement>(size: number, option: SizeTo): [
(node: T | null) => void,
boolean,
] {
const [ref, setRef] = useState<T | null>(null);
const [matches, setMatches] = useState<boolean>(getMatches(ref, size, option));
// Prevent too many rendering using useCallback
const handleSize = useCallback(() => {
setMatches(getMatches(ref, size, option));
}, [ref?.offsetHeight, ref?.offsetWidth]);
useIsomorphicLayoutEffect(() => {
handleSize();
// Listen matchMedia
if (window) {
window.addEventListener('resize', handleSize);
}
return () => {
if (window) {
window.removeEventListener('resize', handleSize);
}
};
}, [ref?.offsetWidth]);
return [setRef, matches];
}
export default useContainerMediaQuery;
partly extracted from useHooks