Add useMediaQuery printing console warning

- Added warning for using `print` query
mui · Dec 17, 2024 · c1fbb29 · c1fbb29
1 parent 67f2708
commit c1fbb29
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts
@@ -156,6 +156,16 @@ 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 query \`print\` for the useMediaQuery.`,
+          'Using the print media query to modify print styles might lead to unexpected results.',
+          'Consider using the `displayPrint` field in the `sx` prop instead.',
+        ].join('\n'),
+      );
+    }
+
     const useMediaQueryImplementation =
       maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
     const match = useMediaQueryImplementation(