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

Question

我在项目中使用MUI，需要检查当前断点以渲染移动设备的div，但每次第一次渲染isMobile和isDesktop值返回< strong>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 });