[docs] Fix useMediaQuery ssr implementation example

[carloscuesta]

Hello! 👋

A colleague (@marlonbs) and me we've been struggling our heads a few days on the useMediaQuery SSR implementation for a Next.js project that we're building on.

After reading css-mediaquery docs and examples we figured it out that our SSR useMediaQuery implementation was not working because the px string was not included into the match. 🙈

I'm making a PR to update the docs just in case it could help anyone ❤️

Related issues: #15187 and #16132

Demo

When you use breakpoint helpers with useMediaQuery

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

This statement theme.breakpoints.down('xs') returns something like this:

'(max-width:767.95px)'

Then the css-mediaquery won't match the value if the px string is not present:

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

[mui-pr-bot]

No bundle size changes comparing 4bfc2e4...0a4d4a6

Generated by 🚫 dangerJS against 0a4d4a6

[eps1lon]

Wasn't there a meme about JS devs preaching strict equality === but using if (!value)? That applies here: https://github.com/ericf/css-mediaquery/blob/34ba6343938e72b270205447b297611c40140a4f/index.js#L40

So 1024 would work but the numeric literal 0 doesn't since it's falsy.

[eps1lon]

That must've been a frustrating debugging session. The fix is much appreciated!