@mui/material-nextjs 6.4.3 → 6.5.0

package/CHANGELOG.md

@@ -1,5 +1,304 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.5.0
+
+<!-- generated comparing v6.4.12..v6.x -->
+
+_Jul 2, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+CSS layers make it easier to override styles by splitting a single style sheet into multiple layers.
+To learn more, check out the [CSS layers documentation](https://v6.mui.com/material-ui/customization/css-layers/).
+
+### `@mui/material@6.5.0`
+
+- [Dialog] Add codemod for deprecated props (#46335) @sai6855
+
+### `@mui/system@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### `@mui/material-nextjs@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### Docs
+
+- Add ListItemButton to make the deprecation clear (#46357) @sai6855
+
+All contributors of this release in alphabetical order: @sai6855, @siriwatknp
+
+## 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_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.11`
+
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45845) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45814) @sai6855
+
+### `@mui/styled-engine@6.4.11`
+
+- Add caching to improve performance for running tests with Jest (#45855) @siriwatknp
+
+### Docs
+
+- Add missing v7 docs banner (#45842) @DiegoAndai
+- Add v7 is here banner (#45838) @DiegoAndai
+- Fix lab version install instructions (#45770) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @Kartik-Murthy, @sai6855
+
+## 6.4.10
+
+<!-- generated comparing v6.4.9..v6.x -->
+
+_Mar 31, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.10`
+
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45735) @imadx
+- [Popover] Allow `null` in `anchorEl` function return type (#45723) @eduter
+
+### Docs
+
+- Fix new React project link, CRA deprecated (#45669) @oliviertassinari
+
+### Core
+
+- [utils] Support cleanup callbacks in useForkRef (#45733) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @eduter, @imadx, @oliviertassinari
+
+## 6.4.9
+
+<!-- generated comparing v6.4.8..v6.x -->
+
+_Mar 25, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.4.9`
+
+- [Autocomplete] Fix when `onHighlightChange` is called (@ZeeshanTamboli) (#45635) @ZeeshanTamboli
+- [StepLabel] Add missing root slot (#45607) @sai6855
+- [Switch] Add slots and slotProps (#45628) @siriwatknp
+- [TextField] Add `root` slot (#45616) @sai6855
+- [Tabs] Fix modifier keys + Left/Right Arrow key from being consumed by tab navigation (#45620) @mushfiqbh
+
+### `@mui/codemon@6.4.9`
+
+- Add missing deprecations in deprecations-all file (#45508) @sai6855
+
+### Docs
+
+- [docs] Fix grammatical errors in support.md (#45636) @letianpailove
+- [docs] Restore utility component docs from MUI Base to Material UI (#45240) @mapache-salvaje
+
+### Core
+
+- [core] Prepare v6 branch for v7 stable release (#45668) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @letianpailove, @mapache-salvaje, @mushfiqbh, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+## 6.4.8
+
+<!-- generated comparing v6.4.7..v6.x -->
+
+_Mar 14, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.8`
+
+- [ListItemText] Add missing `root` slot (#45552) @sai6855
+- [SpeedDial] Add missing `root` slot (#45551) @sai6855
+- [Tooltip] Allow auto placement on tooltip (#45536) @Jtaks
+- [useScrollTrigger] Do nothing if target is null (#45553) @vipierozan99
+- [Accordion] Add missing `root` slot (#45534) @sai6855
+- [AccordionSummary] Add slots and slotProps (#45560) @sai6855
+- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) (#45498) @mj12albert
+
+### `@mui/styled-engine@6.4.8`
+
+- Add `enableCssLayer` prop to StyledEngineProvider (#45563) @siriwatknp
+
+### `@mui/system@6.4.8`
+
+- [system] Prevent nested non-vars theme inheritance (#45564) @siriwatknp
+
+### `@mui/utils@6.4.8`
+
+- Use correct iri-reference homepage format (#45511) @dahiro
+
+### Core
+
+- [test] Fix React 18 tests (#45161) (#45496) @DiegoAndai
+
+### Docs
+
+- [Backdrop] Fix component name in migration guide (#45507) @sai6855
+- Fix broken links to MUI X docs (cherry-pick of #45145) (#45481) @mapache-salvaje
+- [examples] Fix the invalid argument to extract examples (#45493) @ovtn
+- Add `overriding-component-structure` doc to Material UI (#45570) @siriwatknp
+
+All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Jtaks, @mapache-salvaje, @mj12albert, @ovtn, @sai6855, @siriwatknp, @vipierozan99
+
+## 6.4.7
+
+<!-- generated comparing v6.4.6..v6.x -->
+
+_Mar 5, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.7`
+
+- [ThemeProvider] Add `storageManager` prop to `ThemeProvider` (@siriwatknp) (#45437) @siriwatknp
+- [Rating] Deprecate \*Props and complete slots, slotProps (#45295) (#45398) @DiegoAndai
+- [Radio] Fix `inputProps` not forwarded (@siriwatknp) (#45475) @siriwatknp
+
+### Core
+
+- [blog] React 19 migration for MUI X (#45440) @arminmeh
+
+All contributors of this release in alphabetical order: @arminmeh, @DiegoAndai, @siriwatknp
+
+## 6.4.6
+
+<!-- generated comparing v6.4.5..v6.x -->
+
+_Feb 26, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.6`
+
+- [Checkbox] Add slots and slotProps (#45361) @siriwatknp
+- [Drawer] Deprecate \*Props and complete `slots`, `slotProps` (#45377) @siriwatknp
+- [Grid] Improve Grid2 upgrade experience (#45372) @DiegoAndai
+- [InputBase] Deprecate composed classes (#45366) @siriwatknp
+- Fix `slotProps.transition` types (#45367) @siriwatknp
+- Allow nested theme creation with `vars` (#45368) @siriwatknp
+- Fix wrong slotProps of DetailsHTMLAttributes types (#45356) @siriwatknp
+- [Popover] Deprecate \*Props and complete `slots`, `slotProps` (#45337) @siriwatknp
+- [Radio] Add slots and slotProps (#45364) @siriwatknp
+- [Slider] Fix css class selector in migration guide (#45409) @sai6855
+- [Slider] Fix spacings in .md files (#45393) @sai6855
+- [Snackbar] Add Slots and SlotProps (#45103) (#45352) @siriwatknp
+- [SpeedDialAction] Add slots and slotProps (#45365) @siriwatknp
+- [SwitchBase] Deprecate `inputProps` and complete slots, slotProps (#45338) @siriwatknp
+- [Tabs] Deprecate \*Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
+- [Menu] Deprecate \*Props and complete `slots`, `slotProps` (#45369) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45403) @ZeeshanTamboli
+- Fix typo in slider docs (#45392) @sai6855
+
+### Core
+
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45412) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+## 6.4.5
+
+<!-- generated comparing v6.4.4..v6.x -->
+
+_Feb 18, 2025_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@6.4.5`
+
+- [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45303) @ZeeshanTamboli
+- [Button] Apply id only if loading indicator is present (#45339) @aarongarciah
+
+### Docs
+
+- [icons] Fix typo in material-icons.md (#45336) @a-s-russo
+- [Menu] Add Grouped Menu demo (#45292) @noobDev31
+
+### Core
+
+- [blog] Consistent Base UI terminology (#45342) @aarongarciah
+- Fix double redirection to Base UI (#45146) @oliviertassinari
+
+All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @noobDev31, @oliviertassinari, @ZeeshanTamboli
+
+## 6.4.4
+
+<!-- generated comparing v6.4.3..v6.x -->
+
+_Feb 11, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.4`
+
+- [MobileStepper] deprecate `LinearProgressProps` and complete `slots`, `slotProps` (@siriwatknp) (#45242) @siriwatknp
+- [Slider] Deprecate composed classes (@sai6855) (#45223) @sai6855
+- [utils] Merge `sx` instead of override when using `mergeSlotProps` (#45129) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Improve Google Maps search example (#44708) @oliviertassinari
+- [Dialog] Removes deprecated PaperProps from docs (#45217) @sai6855
+- A quick first step to update docs for Tailwind v4 (#45221) @oliviertassinari
+
+### Core
+
+- Fix missing store contributor renaming (527222d) @oliviertassinari
+- Fix MUI Base vale rule (#45140) @oliviertassinari
+- Fix 404 errors (#45137) @oliviertassinari
+- [docs] Sync active sponsors (#45204) @oliviertassinari
+- [docs-infra] Move Ukraine banner to the bottom (#45135) @oliviertassinari
+
+All contributors of this release in alphabetical order: @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.3
 
 <!-- generated comparing v6.4.2..v6.x -->

package/modern/v13-appRouter/appRouterV13.js

@@ -26,7 +26,7 @@ export default function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/modern/v13-pagesRouter/createCache.js

@@ -4,14 +4,30 @@ const isBrowser = typeof document !== 'undefined';
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
+export default function createEmotionCache(options) {
   let insertionPoint;
   if (isBrowser) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return createCache({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = createCache({
     key: 'mui',
-    insertionPoint
+    insertionPoint,
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      // ignore styles that contain layer order (`@layer ...` without `{`)
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/modern/v13-pagesRouter/index.js

@@ -1,2 +1,3 @@
 export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
+export * from "./pagesRouterV13App.js";
+export { default as createEmotionCache } from "./createCache.js";

package/modern/v13-pagesRouter/pagesRouterV13Document.js

@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
           }
-        }, style.key))
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/_jsx("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/node/v13-appRouter/appRouterV13.js

@@ -33,7 +33,7 @@ function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/node/v13-pagesRouter/createCache.js

@@ -11,14 +11,30 @@ const isBrowser = typeof document !== 'undefined';
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-function createEmotionCache() {
+function createEmotionCache(options) {
   let insertionPoint;
   if (isBrowser) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return (0, _cache.default)({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = (0, _cache.default)({
     key: 'mui',
-    insertionPoint
+    insertionPoint,
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      // ignore styles that contain layer order (`@layer ...` without `{`)
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/node/v13-pagesRouter/index.js

@@ -1,11 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  createEmotionCache: true
+};
+Object.defineProperty(exports, "createEmotionCache", {
+  enumerable: true,
+  get: function () {
+    return _createCache.default;
+  }
+});
 var _pagesRouterV13Document = require("./pagesRouterV13Document");
 Object.keys(_pagesRouterV13Document).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _pagesRouterV13Document[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_pagesRouterV13Document).forEach(function (key) {
 var _pagesRouterV13App = require("./pagesRouterV13App");
 Object.keys(_pagesRouterV13App).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _pagesRouterV13App[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -24,4 +36,5 @@ Object.keys(_pagesRouterV13App).forEach(function (key) {
       return _pagesRouterV13App[key];
     }
   });
-});
+});
+var _createCache = _interopRequireDefault(require("./createCache"));

package/node/v13-pagesRouter/pagesRouterV13Document.js

@@ -83,13 +83,22 @@ async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
           }
-        }, style.key))
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "6.4.3",
+  "version": "6.5.0",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",

package/v13-appRouter/appRouterV13.js

@@ -26,7 +26,7 @@ export default function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/v13-pagesRouter/createCache.d.ts

@@ -1 +1,4 @@
-export default function createEmotionCache(): import("@emotion/cache").EmotionCache;
+import createCache from '@emotion/cache';
+export default function createEmotionCache(options?: {
+    enableCssLayer?: boolean;
+} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;

package/v13-pagesRouter/createCache.js

@@ -4,14 +4,30 @@ const isBrowser = typeof document !== 'undefined';
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
+export default function createEmotionCache(options) {
   let insertionPoint;
   if (isBrowser) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return createCache({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = createCache({
     key: 'mui',
-    insertionPoint
+    insertionPoint,
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      // ignore styles that contain layer order (`@layer ...` without `{`)
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/v13-pagesRouter/index.d.ts

@@ -1,2 +1,3 @@
 export * from './pagesRouterV13Document';
 export * from './pagesRouterV13App';
+export { default as createEmotionCache } from './createCache';

package/v13-pagesRouter/index.js

@@ -1,2 +1,3 @@
 export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
+export * from "./pagesRouterV13App.js";
+export { default as createEmotionCache } from "./createCache.js";

package/v13-pagesRouter/pagesRouterV13Document.js

@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
           }
-        }, style.key))
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/_jsx("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);