Metarial UI useMediaQuery hooks 渲染两次到 React Component，你有什么解决方案吗？

Question

我在项目中使用 MUI，需要检查当前断点以渲染移动设备的 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 });