Question

在服务器端有useMediaQuery的下一个代码段Material_UI documentation：

import React from 'react';
import mediaQuery from 'css-mediaquery';
import { ThemeProvider } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}

export default function ServerSide() {
  const ssrMatchMedia = query => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: 800,
    }),
  });

  return (
    <ThemeProvider
      theme={{
        props: {
          // Change the default options of useMediaQuery
          MuiUseMediaQuery: { ssrMatchMedia },
        },
      }}
    >
      <MyComponent />
    </ThemeProvider>
  );
}

然后他们说

请确保向客户端提供相同的自定义匹配媒体实现，以确保水合匹配。

在我看来，实际上在客户端上使用它实际上是用此自定义实现替换了默认的window.matchMedia（）。换句话说，宽度应该始终为800。但是当我尝试了这段代码时，它会打印出

（最小宽度：600px）匹配：错误

当宽度<600 px但600 <800时始终为true。因此，实际上自定义matchMedia不起作用。问题是

为什么自定义实现在客户端不起作用
我们如何实现服务器和客户端匹配

如何为材料用户界面useMediaQuery实现自定义matchMedia

0 个答案: