[useMediaQuery] Fix ssrMatchMedia requiring listener mixin (#18501)

Author: eps1lon

docs/package.json

@@ -34,6 +34,7 @@
     "@material-ui/types": "^4.1.1",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
+    "@types/css-mediaquery": "^0.1.0",
     "@types/json2mq": "^0.2.0",
     "@types/react-autosuggest": "^9.3.11",
     "@types/react-dom": "^16.9.1",

docs/src/pages/components/use-media-query/ServerSide.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import mediaQuery from 'css-mediaquery';
+import { ThemeProvider, Theme } 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: string) => ({
+    matches: mediaQuery.match(query, {
+      // The estimated CSS width of the browser.
+      width: 800,
+    }),
+  });
+
+  return (
+    <ThemeProvider<Theme>
+      theme={{
+        props: {
+          // Change the default options of useMediaQuery
+          MuiUseMediaQuery: { ssrMatchMedia },
+        },
+      }}
+    >
+      <MyComponent />
+    </ThemeProvider>
+  );
+}

packages/material-ui/src/useMediaQuery/useMediaQuery.d.ts

@@ -13,7 +13,7 @@ export type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
 export interface Options {
   defaultMatches?: boolean;
   noSsr?: boolean;
-  ssrMatchMedia?: (query: string) => MuiMediaQueryList;
+  ssrMatchMedia?: (query: string) => { matches: boolean };
 }
 
 export default function useMediaQuery<Theme = unknown>(

yarn.lock

@@ -2020,6 +2020,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/css-mediaquery@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.0.tgz#61d439d8163880e90b61d19aba24f7b778c4e77d"
+  integrity sha512-jzZ9bRw8fTgCEllDvE7GHR1zTP5LsDHJbAX6BCwD9qdxIOq/Le5TTsdteoCIdEQaFpDMvudLHU/hLo1Lmfcy0Q==
+
 "@types/enzyme@^3.10.3":
   version "3.10.3"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.3.tgz#02b6c5ac7d0472005944a652e79045e2f6c66804"