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

Question

我在项目中使用 MUI，需要检查当前断点以渲染移动设备的 div，但每次第一次渲染时isMobile和isDesktop值返回false，但在第二次渲染后设置正确的值。它在 UI 方面运行良好，但如果可能的话，我想避免第一次不必要的渲染？

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

标签： reactjsmaterial-ui

Answer 1

您应该添加 noSsr 选项

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