@mui/system 6.4.11 → 6.4.12

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.12
+
+<!-- generated comparing v6.4.11..v6.x -->
+
+_May 30, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.4.12`
+
+- [Badge] Replace useSlotProps with useSlot hook (#45876) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45875) @sai6855
+- [CardActionArea] Add slots and slotProps (#45877) @sai6855
+- [OutlinedInput] Add missing `notchedOutline` slot (#45938) @siriwatknp
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#45886) @good-jinu
+- Fix theme object changes between renders (#45874) @siriwatknp
+
+### `@mui/material-nextjs@6.4.12`
+
+- Do not wrap `@layer` order rules in App Router (#45870) @Nayeem-XTREME
+
+### `@mui/system@6.4.12`
+
+- Skip styled component from being transformed (#46184) @siriwatknp
+
+### Docs
+
+- [Dialog] Remove deprecated props usage in demos (#45928) @sai6855
+- [Grid] Update grid migration guide (#46153) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (@andreachiera) (#45865) @andreachiera
+- Update CSS variable usage in migration guide for Pigment CSS (#46038) @sai6855
+- Remove outdated StackOverflow tag (9b9f96b) @oliviertassinari
+- Update `@mui/icons-material` install command to use 6.x version (#45810) @Nickknack
+- Add AccordionSummary to the breaking change migration (#45973) @siriwatknp
+
+All contributors of this release in alphabetical order: @andreachiera, @good-jinu, @Nayeem-XTREME, @Nickknack, @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.11
 
 _Apr 9, 2025_

package/createStyled/createStyled.js

@@ -150,10 +150,15 @@ function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

package/esm/createStyled/createStyled.js

@@ -141,10 +141,15 @@ export default function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

package/esm/useMediaQuery/useMediaQuery.js

@@ -102,6 +102,9 @@ export function unstable_createUseMediaQuery(params = {}) {
     }
     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(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
     if (process.env.NODE_ENV !== 'production') {

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.11";
+export const version = "6.4.12";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("11");
+export const patch = Number("12");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.11
+ * @mui/system v6.4.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/createStyled/createStyled.js

@@ -141,10 +141,15 @@ export default function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.11
+ * @mui/system v6.4.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useMediaQuery/useMediaQuery.js

@@ -102,6 +102,9 @@ export function unstable_createUseMediaQuery(params = {}) {
     }
     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(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
     if (process.env.NODE_ENV !== 'production') {

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.11";
+export const version = "6.4.12";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("11");
+export const patch = Number("12");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.4.11",
+  "version": "6.4.12",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,9 +30,9 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.4.9",
-    "@mui/styled-engine": "^6.4.11",
     "@mui/types": "~7.2.24",
+    "@mui/styled-engine": "^6.4.11",
+    "@mui/private-theming": "^6.4.9",
     "@mui/utils": "^6.4.9"
   },
   "peerDependencies": {

package/useMediaQuery/useMediaQuery.js

@@ -110,6 +110,9 @@ function unstable_createUseMediaQuery(params = {}) {
     }
     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(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
     if (process.env.NODE_ENV !== 'production') {

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.4.11";
+const version = exports.version = "6.4.12";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("11");
+const patch = exports.patch = Number("12");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;