javascript - Material UI useMediaQuery 导致故障/跳跃
问题描述
我正在使用 Material UI 的 useMediaQuery() 钩子,我已经注入了主题提供程序并创建了一个像这样的变量:
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down('sm') );
我在几个地方使用 isSmall 变量来确定我的页面的各种特征。这是一个例子:
<Typography variant={isSmall ? "body2" : "h5"}>
Case Studies
</Typography>
我遇到的问题是,当页面第一次加载时,它会呈现 isSmall 的所有错误版本,然后快速纠正它的自身,从而导致相当难看的故障。
如果我删除 useMediaQuery 依赖项并使用 makeStyles() 方法设置样式,一切都很好,例如:
const useStyles = makeStyles((theme) => ({
cardImg: {
opacity: 0.8,
height: '60px',
[theme.breakpoints.down("sm")]: {
height: '40px'
}
}
}));
这工作正常,但我看不出如何在没有 useMediaQueries 的情况下调用 MUI 样式变量/变体,如“body2”和“caption”等。
如果有人可以提供帮助,我将不胜感激。
谢谢,丹。
解决方案
我找到了解决这个问题的方法。看起来我遇到了这个问题: https ://github.com/mui-org/material-ui/issues/21048
解决方案是使用 noSsr 选项(因为我不是服务器端渲染),如下所示:
const isSmall = useMediaQuery(theme.breakpoints.down('sm'), {noSsr: true});
它确实在useMediaQuery API 文档中提到了这一点。
谢谢你的帮助,
担。