[material-ui] Support theme scoping in useMediaQuery

[siriwatknp]

closes #44335

Added a test and updated the types to use the Material UI Theme.

Review recommendation: hide whitespace

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-44339--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against b4e1532

[DiegoAndai]

LGTM 😊

[seanparmelee]

Just a heads up that this change may require users to make code changes.

We had some code like this:

  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'));

and when we updated to 6.1.7 our build started failing on this line with

Type error: Expected 0 type arguments, but got 1.

Granted, it's easy enough to remove the <Theme>

[DiegoAndai]

Thanks for letting us know @seanparmelee!

@siriwatknp seems like we should've added the type argument here, right? https://github.com/mui/material-ui/pull/44339/files#diff-4a4c308f0f78aea6f2ff8d60829ebcbef84029157da66ce2c6a8f4411b1fbbc8

[seanparmelee]

Just spun up a dev server (we're using Next.js 14.2.17) with this version of MUI and received this error when navigating to our app:

Error: Attempted to call unstable_createUseMediaQuery() from the server but unstable_createUseMediaQuery is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

If I disable turbopack and try again, the error is:

Error: (0 , _mui_system_useMediaQuery__WEBPACK_IMPORTED_MODULE_0__.unstable_createUseMediaQuery) is not a function

I don't see these errors when running in production mode (i.e. next start) and the app works as expected in areas where we're using useMediaQuery

I can log a separate issue for this if you'd like.