diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index c2808dd836892d..96bec211cdc821 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -25,7 +25,11 @@ The media query string can be any valid CSS media query, for example [`'(prefers {{"demo": "SimpleMediaQuery.js", "defaultCodeOpen": true}} -⚠️ You can't use `'print'` per browsers limitation, for example [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398). +:::warning +Using the query `'print'` to modify a document for printing is not supported, as changes made in re-rendering may not be accurately reflected. +You can use the `sx` prop's `displayPrint` field for this purpose instead. +See [MUI System—Display in print](/system/display/#display-in-print) for more details. +::: ## Using breakpoint helpers diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index d3da7b61287469..d1fc34b436e6ba 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -156,6 +156,17 @@ export function unstable_createUseMediaQuery(params: { themeId?: string } = {}) let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput; query = query.replace(/^@media( ?)/m, ''); + if (query.includes('print')) { + console.warn( + [ + `MUI: You have provided a \`print\` query to the \`useMediaQuery\` hook.`, + 'Using the print media query to modify print styles can lead to unexpected results.', + 'Consider using the `displayPrint` field in the `sx` prop instead.', + 'More information about `displayPrint` on our docs: https://mui.com/system/display/#display-in-print.', + ].join('\n'), + ); + } + const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld; const match = useMediaQueryImplementation(