如何在媒体查询中使用material ui props

Question

我只需要知道如何使用材质ui props与媒体查询?举个例子，假设我有一个排版组件，我给h1分配了变量prop，然后我需要变量prop来改变屏幕尺寸小于600px的h5。

怎么做?

我知道在material ui v5中有样式挂钩，我在里面使用了媒体查询。

Answer 1

可以像下面这样使用useTheme和useMediaQuery:

function Test() {
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Typography variant={matches ? "h1" : "h5"}>
my text ...
</Typography>
);
}

或者直接使用useMediaQuery:

function Test() {
const matches = useMediaQuery('(min-width:600px)');
return (
<Typography variant={matches ? "h1" : "h5"}>
my text ...
</Typography>
);
}