diff --git a/docs/src/pages/components/portal/portal.md b/docs/src/pages/components/portal/portal.md
index fe79e32f7ba4d5..4b9eab5d93f175 100644
--- a/docs/src/pages/components/portal/portal.md
+++ b/docs/src/pages/components/portal/portal.md
@@ -13,7 +13,7 @@ The children of the portal component will be appended to the `container` specifi
 
 The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components.
 On the server, the content won't be rendered.
-You have to wait for the client side hydration to see the children.
+You have to wait for the client-side hydration to see the children.
 
 ## Simple Portal
 
diff --git a/docs/src/pages/components/use-media-query/ServerSide.js b/docs/src/pages/components/use-media-query/ServerSide.js
index b55fd899542aac..de67bacbaf18bb 100644
--- a/docs/src/pages/components/use-media-query/ServerSide.js
+++ b/docs/src/pages/components/use-media-query/ServerSide.js
@@ -1,28 +1,39 @@
 import React from 'react';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@material-ui/styles';
-import useMediaQueryTheme from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
-  const matches = useMediaQueryTheme('@media (min-width:600px)');
+  const matches = useMediaQuery('(min-width:600px)');
 
-  return <span>{`@media (min-width:600px) matches: ${matches}`}</span>;
+  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
 }
 
 export default function ServerSide() {
-  // Use https://github.com/ericf/css-mediaquery as ponyfill.
   const ssrMatchMedia = query => ({
+    // Use https://github.com/ericf/css-mediaquery as ponyfill.
     matches: mediaQuery.match(query, {
       // The estimated CSS width of the browser.
       // For the sake of this demo, we are using a fixed value.
-      // In production, you can look into client-hint https://caniuse.com/#search=client%20hint
-      // or user-agent resolution.
+      //
+      // In production, you can leverage:
+      //
+      // - Client hints. You can ask the client to send your server its width.
+      // Be aware that this feature is not supported everywhere: https://caniuse.com/#search=client%20hint.
+      // - User-agent. You can parse the user agent of the client, then convert the data to a
+      // is mobile or is desktop variable, and finally, guess the most likely screen width of the client.
       width: 800,
     }),
   });
 
   return (
-    <ThemeProvider theme={{ props: { MuiUseMediaQuery: { ssrMatchMedia } } }}>
+    <ThemeProvider
+      theme={{
+        props: {
+          MuiUseMediaQuery: { ssrMatchMedia },
+        },
+      }}
+    >
       <MyComponent />
     </ThemeProvider>
   );
diff --git a/docs/src/pages/components/use-media-query/SimpleMediaQuery.tsx b/docs/src/pages/components/use-media-query/SimpleMediaQuery.tsx
new file mode 100644
index 00000000000000..4c3bf0e13fec7a
--- /dev/null
+++ b/docs/src/pages/components/use-media-query/SimpleMediaQuery.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+export default function SimpleMediaQuery() {
+  const matches = useMediaQuery('(min-width:600px)');
+
+  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
+}
diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md
index 14eb4744d7a57d..fbfac9090a0cb8 100644
--- a/docs/src/pages/components/use-media-query/use-media-query.md
+++ b/docs/src/pages/components/use-media-query/use-media-query.md
@@ -11,8 +11,7 @@ Some of the key features:
 - ⚛️ It has an idiomatic React API.
 - 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
 - 📦 [1 kB gzipped](/size-snapshot).
-- 💄 It's an alternative to react-responsive and react-media that aims for simplicity.
-- 🤖 It supports Server-side rendering.
+- 🤖 It supports server-side rendering.
 
 ## Simple media query
 
@@ -39,19 +38,68 @@ function MyComponent() {
 
 {{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
 
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+  const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
 ## Using JavaScript syntax
 
-[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
 
 {{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
 
 ## Server-side rendering
 
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server, we recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery).
-We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server.
+We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
 
 {{"demo": "pages/components/use-media-query/ServerSide.js"}}
 
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds.
+Be aware of the tradeoff. The support can only be partial.
+
+Try relying on client-side CSS media queries first.
+For instance, you could use:
+
+- [`<Box display>`](/system/display/#hiding-elements)
+- [`<Hidden implementation="css">`](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Testing
+
+Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
+
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it.
+We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+  return query => ({
+    matches: mediaQuery.match(query, { width }),
+    addListener: () => {},
+    removeListener: () => {},
+  });
+}
+
+describe('MyTests', () => {
+  beforeAll(() => {
+    window.matchMedia = createMatchMedia(window.innerWidth);
+  });
+});
+```
+
 ## Migrating from `withWidth()`
 
 The `withWidth()` higher-order component injects the screen width of the page.
@@ -84,7 +132,7 @@ function useWidth() {
 
 #### Arguments
 
-1. `query` (*String*): A string representing the media query to handle.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
 2. `options` (*Object* [optional]):
   - `options.defaultMatches` (*Boolean* [optional]):
   As `window.matchMedia()` is unavailable on the server,
@@ -97,7 +145,7 @@ function useWidth() {
   - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate
   the screen of the client browser.
   For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint.
-  You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+  You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
 
 #### Returns
 
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index 8439d9622aa3f6..ff966d7639b3bf 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -585,7 +585,7 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 ```
 
 Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` tags.
-The client side gets the nonce from a header. You must include this header regardless of whether or not SSR is used.
+The client-side gets the nonce from a header. You must include this header regardless of whether or not SSR is used.
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index 33990870e4e79d..323a01666e7904 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -288,7 +288,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
       {children}
       {!disableRipple && !disabled ? (
         <NoSsr>
-          {/* TouchRipple is only needed client side, x2 boost on the server. */}
+          {/* TouchRipple is only needed client-side, x2 boost on the server. */}
           <TouchRipple ref={rippleRef} center={centerRipple} {...TouchRippleProps} />
         </NoSsr>
       ) : null}
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index c98ee5a8fdb58a..5a6d94ece53091 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -136,7 +136,7 @@ function Tooltip(props) {
 
   React.useEffect(() => {
     // Fallback to this default id when possible.
-    // Use the random value for client side rendering only.
+    // Use the random value for client-side rendering only.
     // We can't use it server-side.
     if (!defaultId.current) {
       defaultId.current = `mui-tooltip-${Math.round(Math.random() * 1e5)}`;
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.d.ts b/packages/material-ui/src/useMediaQuery/useMediaQuery.d.ts
index 854f6ebdff4ecf..bf381c8f307974 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQuery.d.ts
+++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.d.ts
@@ -16,4 +16,7 @@ export interface Options {
   ssrMatchMedia?: (query: string) => MuiMediaQueryList;
 }
 
-export default function useMediaQuery(query: string, options?: Options): boolean;
+export default function useMediaQuery<Theme = unknown>(
+  query: string | ((theme: Theme) => string),
+  options?: Options,
+): boolean;
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.js
index 6ccaf5a3537fcb..19d82710ceef95 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQuery.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.js
@@ -1,37 +1,53 @@
 import React from 'react';
+import warning from 'warning';
+import { getThemeProps, useTheme } from '@material-ui/styles';
 
 // This variable will be true once the server-side hydration is completed.
 let hydrationCompleted = false;
 
-function deepEqual(a, b) {
-  return a.length === b.length && a.every((item, index) => item === b[index]);
-}
-
 function useMediaQuery(queryInput, options = {}) {
-  const multiple = Array.isArray(queryInput);
-  let queries = multiple ? queryInput : [queryInput];
-  queries = queries.map(query => query.replace('@media ', ''));
+  const theme = useTheme();
+  const props = getThemeProps({
+    theme,
+    name: 'MuiUseMediaQuery',
+    props: {},
+  });
+
+  warning(
+    typeof queryInput !== 'function' || theme !== null,
+    [
+      'Material-UI: the `query` argument provided is invalid.',
+      'You are providing a function without a theme in the context.',
+      'One of the parent elements needs to use a ThemeProvider.',
+    ].join('\n'),
+  );
+
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, '');
 
-  // Wait for JSDOM to support the match media feature.
+  // Wait for jsdom to support the match media feature.
   // All the browsers Material-UI support have this built-in.
   // This defensive check is here for simplicity.
   // Most of the time, the match media logic isn't central to people tests.
   const supportMatchMedia =
     typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
 
-  const { defaultMatches = false, noSsr = false, ssrMatchMedia = null } = options;
+  const { defaultMatches = false, noSsr = false, ssrMatchMedia = null } = {
+    ...props,
+    ...options,
+  };
 
-  const [matches, setMatches] = React.useState(() => {
+  const [match, setMatch] = React.useState(() => {
     if ((hydrationCompleted || noSsr) && supportMatchMedia) {
-      return queries.map(query => window.matchMedia(query).matches);
+      return window.matchMedia(query).matches;
     }
     if (ssrMatchMedia) {
-      return queries.map(query => ssrMatchMedia(query).matches);
+      return ssrMatchMedia(query).matches;
     }
 
     // Once the component is mounted, we rely on the
     // event listeners to return the correct matches value.
-    return queries.map(() => defaultMatches);
+    return defaultMatches;
   });
 
   React.useEffect(() => {
@@ -41,27 +57,20 @@ function useMediaQuery(queryInput, options = {}) {
       return undefined;
     }
 
-    const queryLists = queries.map(query => window.matchMedia(query));
-    setMatches(prev => {
-      const next = queryLists.map(queryList => queryList.matches);
-      return deepEqual(prev, next) ? prev : next;
-    });
+    const queryList = window.matchMedia(query);
+    setMatch(queryList.matches);
 
     function handleMatchesChange() {
-      setMatches(queryLists.map(queryList => queryList.matches));
+      setMatch(queryList.matches);
     }
 
-    queryLists.forEach(queryList => {
-      queryList.addListener(handleMatchesChange);
-    });
+    queryList.addListener(handleMatchesChange);
     return () => {
-      queryLists.forEach(queryList => {
-        queryList.removeListener(handleMatchesChange);
-      });
+      queryList.removeListener(handleMatchesChange);
     };
-  }, queries); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [query, supportMatchMedia]);
 
-  return multiple ? matches : matches[0];
+  return match;
 }
 
 export function testReset() {
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
index b89fdcbcf26655..33872133445291 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { act } from 'react-dom/test-utils';
 import PropTypes from 'prop-types';
-import { createMount } from '@material-ui/core/test-utils';
+import { ThemeProvider } from '@material-ui/styles';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import { act, cleanup, createClientRender } from 'test/utils/createClientRender';
+import { createRender } from '@material-ui/core/test-utils';
 import mediaQuery from 'css-mediaquery';
-import { assert } from 'chai';
+import { expect } from 'chai';
 import { spy } from 'sinon';
 import useMediaQuery, { testReset } from './useMediaQuery';
 
@@ -34,27 +35,27 @@ function createMatchMedia(width, ref) {
 }
 
 describe('useMediaQuery', () => {
-  let matchMediaInstances;
-  let mount;
-  let values;
-
   // Only run the test on node.
   // Waiting for https://github.com/facebook/react/issues/14050
   if (!/jsdom/.test(window.navigator.userAgent)) {
     return;
   }
 
-  before(() => {
-    mount = createMount({ strict: true });
+  const render = createClientRender({ strict: true });
+  let values;
+
+  beforeEach(() => {
+    testReset();
+    values = spy();
   });
 
-  after(() => {
-    mount.cleanUp();
+  afterEach(() => {
+    cleanup();
   });
 
   describe('without feature', () => {
     it('should work without window.matchMedia available', () => {
-      assert.strictEqual(typeof window.matchMedia, 'undefined');
+      expect(typeof window.matchMedia).to.equal('undefined');
       const ref = React.createRef();
       const text = () => ref.current.textContent;
       const Test = () => {
@@ -62,15 +63,15 @@ describe('useMediaQuery', () => {
         return <span ref={ref}>{`${matches}`}</span>;
       };
 
-      mount(<Test />);
-      assert.strictEqual(text(), 'false');
+      render(<Test />);
+      expect(text()).to.equal('false');
     });
   });
 
   describe('with feature', () => {
+    let matchMediaInstances;
+
     beforeEach(() => {
-      testReset();
-      values = spy();
       matchMediaInstances = [];
       window.matchMedia = createMatchMedia(1200, matchMediaInstances);
     });
@@ -85,9 +86,9 @@ describe('useMediaQuery', () => {
           return <span ref={ref}>{`${matches}`}</span>;
         };
 
-        mount(<Test />);
-        assert.strictEqual(text(), 'false');
-        assert.strictEqual(values.callCount, 1);
+        render(<Test />);
+        expect(text()).to.equal('false');
+        expect(values.callCount).to.equal(1);
       });
 
       it('should take the option into account', () => {
@@ -101,9 +102,9 @@ describe('useMediaQuery', () => {
           return <span ref={ref}>{`${matches}`}</span>;
         };
 
-        mount(<Test />);
-        assert.strictEqual(text(), 'false');
-        assert.strictEqual(values.callCount, 2);
+        render(<Test />);
+        expect(text()).to.equal('false');
+        expect(values.callCount).to.equal(2);
       });
     });
 
@@ -119,9 +120,9 @@ describe('useMediaQuery', () => {
           return <span ref={ref}>{`${matches}`}</span>;
         };
 
-        mount(<Test />);
-        assert.strictEqual(text(), 'false');
-        assert.strictEqual(values.callCount, 1);
+        render(<Test />);
+        expect(text()).to.equal('false');
+        expect(values.callCount).to.equal(1);
       });
 
       it('should render twice if the default value does not match the expectation', () => {
@@ -135,9 +136,9 @@ describe('useMediaQuery', () => {
           return <span ref={ref}>{`${matches}`}</span>;
         };
 
-        mount(<Test />);
-        assert.strictEqual(text(), 'false');
-        assert.strictEqual(values.callCount, 2);
+        render(<Test />);
+        expect(text()).to.equal('false');
+        expect(values.callCount).to.equal(2);
       });
 
       it('should render once if the default value does not match the expectation', () => {
@@ -152,9 +153,9 @@ describe('useMediaQuery', () => {
           return <span ref={ref}>{`${matches}`}</span>;
         };
 
-        mount(<Test />);
-        assert.strictEqual(text(), 'false');
-        assert.strictEqual(values.callCount, 1);
+        render(<Test />);
+        expect(text()).to.equal('false');
+        expect(values.callCount).to.equal(1);
       });
     });
 
@@ -169,15 +170,15 @@ describe('useMediaQuery', () => {
         return <span ref={ref}>{`${matches}`}</span>;
       };
 
-      mount(<Test />);
-      assert.strictEqual(text(), 'false');
-      assert.strictEqual(values.callCount, 2);
+      const { unmount } = render(<Test />);
+      expect(text()).to.equal('false');
+      expect(values.callCount).to.equal(2);
 
-      ReactDOM.unmountComponentAtNode(mount.attachTo);
+      unmount();
 
-      mount(<Test />);
-      assert.strictEqual(text(), 'false');
-      assert.strictEqual(values.callCount, 3);
+      render(<Test />);
+      expect(text()).to.equal('false');
+      expect(values.callCount).to.equal(3);
     });
 
     it('should be able to change the query dynamically', () => {
@@ -194,12 +195,12 @@ describe('useMediaQuery', () => {
         query: PropTypes.string.isRequired,
       };
 
-      const wrapper = mount(<Test query="(min-width:2000px)" />);
-      assert.strictEqual(text(), 'false');
-      assert.strictEqual(values.callCount, 2);
-      wrapper.setProps({ query: '(min-width:100px)' });
-      assert.strictEqual(text(), 'true');
-      assert.strictEqual(values.callCount, 4);
+      const { setProps } = render(<Test query="(min-width:2000px)" />);
+      expect(text()).to.equal('false');
+      expect(values.callCount).to.equal(2);
+      setProps({ query: '(min-width:100px)' });
+      expect(text()).to.equal('true');
+      expect(values.callCount).to.equal(4);
     });
 
     it('should observe the media query', () => {
@@ -214,16 +215,72 @@ describe('useMediaQuery', () => {
         query: PropTypes.string.isRequired,
       };
 
-      mount(<Test query="(min-width:2000px)" />);
-      assert.strictEqual(values.callCount, 1);
-      assert.strictEqual(text(), 'false');
+      render(<Test query="(min-width:2000px)" />);
+      expect(values.callCount).to.equal(1);
+      expect(text()).to.equal('false');
 
       act(() => {
         matchMediaInstances[0].instance.matches = true;
         matchMediaInstances[0].listeners[0]();
       });
-      assert.strictEqual(text(), 'true');
-      assert.strictEqual(values.callCount, 2);
+      expect(text()).to.equal('true');
+      expect(values.callCount).to.equal(2);
+    });
+  });
+
+  describe('server-side', () => {
+    let serverRender;
+
+    before(() => {
+      serverRender = createRender();
+    });
+
+    it('should use the ssr match media ponyfill', () => {
+      const ref = React.createRef();
+      function MyComponent() {
+        const matches = useMediaQuery('(min-width:2000px)');
+        values(matches);
+        return <span ref={ref}>{`${matches}`}</span>;
+      }
+
+      const Test = () => {
+        const ssrMatchMedia = query => ({
+          matches: mediaQuery.match(query, {
+            width: 3000,
+          }),
+        });
+
+        return (
+          <ThemeProvider theme={{ props: { MuiUseMediaQuery: { ssrMatchMedia } } }}>
+            <MyComponent />
+          </ThemeProvider>
+        );
+      };
+
+      const markup = serverRender(<Test />);
+      expect(markup.text()).to.equal('true');
+      expect(values.callCount).to.equal(1);
+    });
+  });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+      PropTypes.resetWarningCache();
+    });
+
+    it('warns on invalid `query` argument', () => {
+      function MyComponent() {
+        useMediaQuery(() => '(min-width:2000px)');
+        return null;
+      }
+
+      render(<MyComponent />);
+      expect(consoleErrorMock.args()[0][0]).to.include('the `query` argument provided is invalid');
     });
   });
 });
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.d.ts b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.d.ts
new file mode 100644
index 00000000000000..f8ac72baf1d28d
--- /dev/null
+++ b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.d.ts
@@ -0,0 +1,3 @@
+import useMediaQuery from './useMediaQuery';
+
+export default useMediaQuery;
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
index e2587ef69849c6..e479e9f71a4e8c 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
@@ -1,15 +1,8 @@
-import { useTheme, getThemeProps } from '@material-ui/styles';
 import useMediaQuery from './useMediaQuery';
 
-function useMediaQueryTheme(query, options) {
-  const theme = useTheme();
-  const props = getThemeProps({
-    theme,
-    name: 'MuiUseMediaQuery',
-    props: {},
-  });
-
-  return useMediaQuery(query, { ...props, ...options });
+// TODO to deprecate in v4.x and remove in v5
+function useMediaQueryTheme(...args) {
+  return useMediaQuery(...args);
 }
 
 export default useMediaQueryTheme;
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.test.js b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.test.js
deleted file mode 100644
index b89cce64dc2861..00000000000000
--- a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from '@material-ui/styles';
-import { createRender } from '@material-ui/core/test-utils';
-import mediaQuery from 'css-mediaquery';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { testReset } from './useMediaQuery';
-import useMediaQueryTheme from './useMediaQueryTheme';
-
-describe('useMediaQueryTheme', () => {
-  let render;
-  let values;
-
-  // Only run the test on node.
-  // Waiting for https://github.com/facebook/react/issues/14050
-  if (!/jsdom/.test(window.navigator.userAgent)) {
-    return;
-  }
-
-  before(() => {
-    render = createRender();
-    if (!window.matchMedia) {
-      window.matchMedia = query => ({
-        matches: mediaQuery.match(query, {
-          width: 1200,
-        }),
-        addListener: () => {},
-        removeListener: () => {},
-      });
-    }
-  });
-
-  beforeEach(() => {
-    testReset();
-    values = spy();
-  });
-
-  it('should use the ssr match media ponyfill', () => {
-    const containerRef = React.createRef();
-    function MyComponent() {
-      const matches = useMediaQueryTheme('(min-width:2000px)');
-      values(matches);
-      return <span ref={containerRef}>{`${matches}`}</span>;
-    }
-
-    const Test = () => {
-      const ssrMatchMedia = query => ({
-        matches: mediaQuery.match(query, {
-          width: 3000,
-        }),
-      });
-
-      return (
-        <ThemeProvider theme={{ props: { MuiUseMediaQuery: { ssrMatchMedia } } }}>
-          <MyComponent />
-        </ThemeProvider>
-      );
-    };
-
-    const wrapper = render(<Test />);
-    assert.strictEqual(wrapper.text(), 'true');
-    assert.strictEqual(values.callCount, 1);
-  });
-});
diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js
index 7c05800e96d403..e3025e56dcbe65 100644
--- a/packages/material-ui/src/withWidth/withWidth.js
+++ b/packages/material-ui/src/withWidth/withWidth.js
@@ -52,9 +52,10 @@ const withWidth = (options = {}) => Component => {
      * width      |  xs   |  sm   |  md   |  lg   |  xl
      */
     const keys = [...theme.breakpoints.keys].reverse();
-    const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key)));
-    const widthComputed = queries.reduce((output, matches, index) => {
-      return !output && matches ? keys[index] : output;
+    const widthComputed = keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+      return !output && matches ? key : output;
     }, null);
 
     const more = {
diff --git a/packages/material-ui/src/withWidth/withWidth.test.js b/packages/material-ui/src/withWidth/withWidth.test.js
index ccf23d801c5f29..a9f8a075d19c65 100644
--- a/packages/material-ui/src/withWidth/withWidth.test.js
+++ b/packages/material-ui/src/withWidth/withWidth.test.js
@@ -4,6 +4,7 @@ import { assert } from 'chai';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 import mediaQuery from 'css-mediaquery';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
+import { testReset } from '../useMediaQuery/useMediaQuery';
 import createMuiTheme from '../styles/createMuiTheme';
 
 function createMatchMedia(width, ref) {
@@ -46,6 +47,7 @@ describe('withWidth', () => {
 
   beforeEach(() => {
     matchMediaInstances = [];
+    testReset();
     window.matchMedia = createMatchMedia(1200, matchMediaInstances);
   });
 
@@ -173,7 +175,7 @@ describe('withWidth', () => {
   describe('option: noSSR', () => {
     it('should work as expected', () => {
       const EmptyWithWidth2 = withWidth({ noSSR: true })(Empty);
-      const wrapper = shallow(<EmptyWithWidth2 />);
+      const wrapper = mount(<EmptyWithWidth2 />);
       assert.strictEqual(wrapper.find(Empty).props().width, 'md');
     });
   });