Material UI useMediaQuery 导致故障/跳跃

Question

我正在使用 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”等。

如果有人可以提供帮助，我将不胜感激。

谢谢，丹。

Answer 1

我找到了解决这个问题的方法。 看起来我遇到了这个问题： https://github.com/mui-org/material-ui/issues/21048

解决方案是使用 noSsr 选项（因为我不是服务器端渲染），如下所示：

const isSmall = useMediaQuery(theme.breakpoints.down('sm'), {noSsr: true});

它确实在useMediaQuery API docs中提到了这一点。

谢谢你的帮助，

担。