Metarial UI useMediaQuery钩子对React Component进行了两次渲染，你有什么解决方案吗

Question

我在项目中使用MUI，需要检查当前断点来为mobile渲染div，但每次第一次渲染isMobile和isDesktop时，返回值false，但在第二次渲染后设置了正确的值。它在UI方面工作得很好，但如果可能的话，我想避免第一次不必要的渲染？

const curTheme = useTheme();
const isMobile = useMediaQuery(curTheme.breakpoints.down("sm"));
const isDesktop = useMediaQuery(curTheme.breakpoints.up("md"));

Answer 1

您应该添加noSsr选项

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });