[docs] Fix useMediaQuery SSR example to v5 theme API

[ValentinH]

• I have followed (at least) the PR section of the contributing guide.

I tried following the example and the ssrMatchMedia was never used. I think the current example is still using v4 implementation. I updated it to the new Theme structure of v5.

https://deploy-preview-30454--material-ui.netlify.app/components/use-media-query/#server-side-rendering

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against d604502

[ValentinH]

While experimenting with the SSR example, I'm wondering if using defaultMatches could also be a valid and simpler solution?

Here's what I have in mind:

const deviceType = parser(req.headers['user-agent']).device.type || 'desktop';

const theme = createTheme({
    components: {
      // Change the default options of useMediaQuery
      MuiUseMediaQuery: {
        defaultProps: {
          defaultMatches: deviceType === 'mobile',
        },
      },
    },
  });

  const html = ReactDOMServer.renderToString(
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>,
  );

[oliviertassinari]

I'm wondering if using defaultMatches could also be a valid and simpler solution?

From my perspective, defaultMatches has one problem: it doesn't account for what the media query is, is asking for below sm? above md? Results won't be consistent in the app.

[oliviertassinari]

@ValentinH Thanks!

[ValentinH]

I'm wondering if using defaultMatches could also be a valid and simpler solution?

From my perspective, defaultMatches has one problem: it doesn't account for what the media query is, is asking for below sm? above md? Results won't be consistent in the app.

Yes this totally makes sense. I was stuck in the mindset of only having mobile or desktop variants.