[英]Material UI useMediaQuery causes glitching/jumping
I am using Material UI's useMediaQuery() hook, I have injected the theme provider and have created a variable like this:我正在使用 Material UI 的 useMediaQuery() 钩子,我已经注入了主题提供程序并创建了一个像这样的变量:
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down('sm') );
I'm using the isSmall variable in several places to determine various characteristics of my page.我在几个地方使用 isSmall 变量来确定我的页面的各种特征。 Here is an example:
这是一个例子:
<Typography variant={isSmall ? "body2" : "h5"}>
Case Studies
</Typography>
The problem I am having is that when the page first loads it renders all of the false versions of isSmall and then quickly corrects it's self causing a rather unsightly glitch.我遇到的问题是,当页面第一次加载时,它会呈现 isSmall 的所有错误版本,然后快速纠正它的自身,从而导致相当难看的故障。
If I remove the useMediaQuery dependancies and set the styling using the makeStyles() method everything is fine, for example:如果我删除 useMediaQuery 依赖项并使用 makeStyles() 方法设置样式,一切都很好,例如:
const useStyles = makeStyles((theme) => ({
cardImg: {
opacity: 0.8,
height: '60px',
[theme.breakpoints.down("sm")]: {
height: '40px'
}
}
}));
This works fine but I don't see how I can invoke MUI style variables/variants like 'body2' and 'caption' etc without useMediaQueries.这工作正常,但我看不出如何在没有 useMediaQueries 的情况下调用 MUI 样式变量/变体,如“body2”和“caption”等。
If anyone can help I'd be appreciative.如果有人可以提供帮助,我将不胜感激。
Thanks, Dan.谢谢,丹。
I found a solution to this problem.我找到了解决这个问题的方法。 It looks like I was experiencing this issue: https://github.com/mui-org/material-ui/issues/21048
看起来我遇到了这个问题: https://github.com/mui-org/material-ui/issues/21048
The solution is to use the noSsr option (as I am not server-side rendering) like this:解决方案是使用 noSsr 选项(因为我不是服务器端渲染),如下所示:
const isSmall = useMediaQuery(theme.breakpoints.down('sm'), {noSsr: true});
It does actually mention this in the useMediaQuery API docs .它确实在useMediaQuery API docs中提到了这一点。
Thanks for your help,谢谢你的帮助,
Dan.担。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.