I just need to know that how to use material ui props with media queries? As an example, let's say I have a typography component and I assigned variant prop to h1 and then I need variant prop to change h5 at the screen size less than 600px.
How to do that?
I know that in material ui v5 has style hook and I have used media queries inside it.
You can use useTheme and useMediaQuery like below:
function Test() {
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Typography variant={matches ? "h1" : "h5"}>
my text ...
</Typography>
);
}
Or simply use useMediaQuery:
function Test() {
const matches = useMediaQuery('(min-width:600px)');
return (
<Typography variant={matches ? "h1" : "h5"}>
my text ...
</Typography>
);
}