Material-UI useMediaQuery 最初未识别正确的断点

Question

在使用 MUIuseMediaQuery钩子时，我注意到我的 React 应用程序有问题并抛出错误，因为钩子最初无法识别正确的断点，然后页面很快会使用正确的值重新呈现。

例子：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'));
console.log(mobile)

安慰：

false
true

这是怎么回事？

Answer 1

这是钩子的预期行为useMediaQuery。MUI 文档中对此进行了解释：

要执行服务器端水合作用，钩子需要渲染两次。第一次使用 false，即服务器的值，第二次使用解析值。这种双通道渲染周期有一个缺点。速度比较慢。如果您只进行客户端渲染，则可以将此选项设置为 true。

因此，要在第一页渲染中获得正确的值，钩子noSsr中的选项useMediaQuery需要是true.

有两种选择：

1) 每个组件：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'), {noSsr: true});

2）在theme对象中全局：

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
          noSsr: true,
      },
    },
  }

显然，这只有在没有服务器端渲染的情况下才有效。

下面的原始答案适用于 Material-UI v4，但该Hidden组件已在 v5 中弃用。

原答案：

我意识到，通过删除媒体查询并将其替换为 Material-UI<Hidden />组件，它可以按照我想要的方式工作。

export const ResponsiveMenuItem = forwardRef((props, ref) => {
  const { children, ...other } = props;

  return (
    <>
      <Hidden smUp>
        <option ref={ref} {...other}>
          {children}
        </option>
      </Hidden>
      <Hidden only="xs">
        <MenuItem ref={ref} {...other}>
          {children}
        </MenuItem>
      </Hidden>
    </>
  );
});