@mui/system 5.16.14 → 5.18.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.18.0
+
+<!-- generated comparing v5.17.1..v5.x -->
+
+_Jun 26, 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://v5.mui.com/material-ui/customization/css-layers/).
+
+### `@mui/system@5.18.0`
+
+- Backport CSS layers from v7 (#46320) @siriwatknp
+
+### `@mui/material-nextjs@5.18.0`
+
+- Backport CSS layers from v7 (#46320) @siriwatknp
+
+### Docs
+
+- Ease migration to v5 (#45991) @oliviertassinari
+- Add AccordionSummary to the breaking change migration (@siriwatknp) (#45972) @siriwatknp
+
+All contributors of this release in alphabetical order: @oliviertassinari, @siriwatknp
+
+## v5.17.1
+
+<!-- generated comparing v5.17.0..v5.x -->
+
+_Mar 18, 2025_
+
+This release fixes the `@mui/types` dependencies in all packages to fix a package layout bug (#45612) @DiegoAndai
+
+## v5.17.0
+
+_Mar 18, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+### `@mui/material@5.17.0`
+
+- [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) (#45238) @DiegoAndai
+- Support nested theme when upper theme is CSS vars theme (#45604) @siriwatknp
+
+All contributors of this release in alphabetical order: @DiegoAndai, @siriwatknp
+
 ## v5.16.14
 
 <!-- generated comparing v5.16.13..v5.x -->

package/GlobalStyles/GlobalStyles.js

@@ -13,13 +13,37 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function wrapGlobalLayer(styles) {
+  const serialized = (0, _styledEngine.internal_serializeStyles)(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = (0, _useTheme.default)(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(styleArg => {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
     styles: globalStyles
   });

package/ThemeProvider/ThemeProvider.js

@@ -15,6 +15,7 @@ var _styledEngine = require("@mui/styled-engine");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
 var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
+var _useLayerOrder = _interopRequireDefault(require("./useLayerOrder"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -63,15 +64,16 @@ function ThemeProvider(props) {
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   const rtlValue = engineTheme.direction === 'rtl';
+  const layerOrder = (0, _useLayerOrder.default)(engineTheme);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_privateTheming.ThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.ThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
         value: rtlValue,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DefaultPropsProvider.default, {
           value: engineTheme == null ? void 0 : engineTheme.components,
-          children: children
+          children: [layerOrder, children]
         })
       })
     })

package/ThemeProvider/useLayerOrder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+export default function useLayerOrder(theme: {
+    modularCssLayers?: boolean | string;
+}): React.JSX.Element | null;

package/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLayerOrder;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
+var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */function useLayerOrder(theme) {
+  const upperTheme = (0, _useThemeWithoutDefault.default)();
+  const id = (0, _useId.default)() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  (0, _useEnhancedEffect.default)(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      var _firstChild$hasAttrib;
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      var _head$querySelector;
+      (_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
+    styles: layerOrder
+  });
+}

package/createStyled.js

@@ -38,6 +38,13 @@ function isStringTag(tag) {
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -58,7 +65,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -69,7 +76,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -94,14 +101,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
+        const variantStyle = typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled(input = {}) {
   const {
@@ -132,6 +140,7 @@ function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -169,13 +178,16 @@ function createStyled(input = {}) {
       // 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 stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -197,7 +209,7 @@ function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -214,7 +226,7 @@ function createStyled(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {

package/esm/GlobalStyles/GlobalStyles.js

@@ -2,16 +2,40 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
+import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+function wrapGlobalLayer(styles) {
+  const serialized = serializeStyles(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = useTheme(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(styleArg => {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/_jsx(MuiGlobalStyles, {
     styles: globalStyles
   });

package/esm/ThemeProvider/ThemeProvider.js

@@ -9,6 +9,8 @@ import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
 import DefaultPropsProvider from '../DefaultPropsProvider';
+import useLayerOrder from './useLayerOrder';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -55,15 +57,16 @@ function ThemeProvider(props) {
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   const rtlValue = engineTheme.direction === 'rtl';
+  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+        children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
           value: engineTheme == null ? void 0 : engineTheme.components,
-          children: children
+          children: [layerOrder, children]
         })
       })
     })

package/esm/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import GlobalStyles from '../GlobalStyles';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
+
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useLayerOrder(theme) {
+  const upperTheme = useThemeWithoutDefault();
+  const id = useId() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      var _firstChild$hasAttrib;
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      var _head$querySelector;
+      (_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}

package/esm/createStyled.js

@@ -4,7 +4,7 @@ const _excluded = ["ownerState"],
   _excluded2 = ["variants"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
+import styledEngineStyled, { internal_processStyles as processStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -27,6 +27,13 @@ function isStringTag(tag) {
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 export const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -47,7 +54,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -58,7 +65,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -83,14 +90,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
+        const variantStyle = typeof variant.style === 'function' ? variant.style(_extends({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer(serializeStyles(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer(serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 export default function createStyled(input = {}) {
   const {
@@ -121,6 +129,7 @@ export default function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -158,13 +167,16 @@ export default function createStyled(input = {}) {
       // 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 stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return props => processStyleArg(stylesArg, _extends({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, _extends({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -186,7 +198,7 @@ export default function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -203,7 +215,7 @@ export default function createStyled(input = {}) {
             variants: themeVariants
           }, _extends({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -64,7 +64,8 @@ export function unstable_createStyleFunctionSx() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
@@ -105,7 +106,8 @@ export function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = merge(css, breakpointsValues);
@@ -116,6 +118,11 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
+        };
+      }
       return removeUnusedBreakpoints(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);

package/esm/version/index.js

@@ -1,7 +1,7 @@
-export const version = "5.16.14";
+export const version = "5.18.0";
 export const major = Number("5");
-export const minor = Number("16");
-export const patch = Number("14");
+export const minor = Number("18");
+export const patch = Number("0");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.16.14
+ * @mui/system v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/GlobalStyles/GlobalStyles.js

@@ -2,16 +2,40 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
+import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+function wrapGlobalLayer(styles) {
+  var serialized = serializeStyles(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = "@layer global{".concat(serialized.styles, "}");
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles(_ref) {
   var styles = _ref.styles,
     themeId = _ref.themeId,
     _ref$defaultTheme = _ref.defaultTheme,
     defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
   var upperTheme = useTheme(defaultTheme);
-  var globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  var globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(function (styleArg) {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/_jsx(MuiGlobalStyles, {
     styles: globalStyles
   });

package/legacy/ThemeProvider/ThemeProvider.js

@@ -10,6 +10,8 @@ import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
 import DefaultPropsProvider from '../DefaultPropsProvider';
+import useLayerOrder from './useLayerOrder';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 var EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme) {
@@ -53,15 +55,16 @@ function ThemeProvider(props) {
   var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   var rtlValue = engineTheme.direction === 'rtl';
+  var layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+        children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
           value: engineTheme == null ? void 0 : engineTheme.components,
-          children: children
+          children: [layerOrder, children]
         })
       })
     })

package/legacy/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import GlobalStyles from '../GlobalStyles';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
+
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useLayerOrder(theme) {
+  var upperTheme = useThemeWithoutDefault();
+  var id = useId() || '';
+  var modularCssLayers = theme.modularCssLayers;
+  var layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = "@layer ".concat(layerOrder, ";");
+  }
+  useEnhancedEffect(function () {
+    var head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    var firstChild = head.firstChild;
+    if (layerOrder) {
+      var _firstChild$hasAttrib;
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      var styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      var _head$querySelector;
+      (_head$querySelector = head.querySelector("style[data-mui-layer-order=\"".concat(id, "\"]"))) == null || _head$querySelector.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}

package/legacy/createStyled.js

@@ -1,10 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 /* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
+import styledEngineStyled, { internal_processStyles as processStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -27,6 +27,13 @@ function isStringTag(tag) {
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && _typeof(serialized) === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = "@layer ".concat(layerName, "{").concat(String(serialized.styles), "}");
+  }
+  return serialized;
+}
 export var systemDefaultTheme = createTheme();
 var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
   if (!string) {
@@ -48,7 +55,7 @@ function defaultOverridesResolver(slot) {
     return styles[slot];
   };
 }
-function processStyleArg(callableStyle, _ref2) {
+function processStyleArg(callableStyle, _ref2, layerName) {
   var ownerState = _ref2.ownerState,
     props = _objectWithoutProperties(_ref2, ["ownerState"]);
   var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
@@ -58,7 +65,7 @@ function processStyleArg(callableStyle, _ref2) {
     return resolvedStylesArg.flatMap(function (resolvedStyle) {
       return processStyleArg(resolvedStyle, _extends({
         ownerState: ownerState
-      }, props));
+      }, props), layerName);
     });
   }
   if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
@@ -83,14 +90,15 @@ function processStyleArg(callableStyle, _ref2) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
+        var variantStyle = typeof variant.style === 'function' ? variant.style(_extends({
           ownerState: ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer(serializeStyles(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer(serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -124,7 +132,10 @@ export default function createStyled() {
       inputSkipSx = inputOptions.skipSx,
       _inputOptions$overrid = inputOptions.overridesResolver,
       overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
-      options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+      options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]);
+    var layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
+
+    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
     // TODO v6: remove `Root` in the next major release
     // For more details: https://github.com/mui/material-ui/pull/37908
@@ -161,13 +172,14 @@ export default function createStyled() {
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
         return function (props) {
+          var theme = resolveTheme({
+            theme: props.theme,
+            defaultTheme: defaultTheme,
+            themeId: themeId
+          });
           return processStyleArg(stylesArg, _extends({}, props, {
-            theme: resolveTheme({
-              theme: props.theme,
-              defaultTheme: defaultTheme,
-              themeId: themeId
-            })
-          }));
+            theme: theme
+          }), theme.modularCssLayers ? layerName : undefined);
         };
       }
       return stylesArg;
@@ -196,7 +208,7 @@ export default function createStyled() {
               slotStyle = _ref4[1];
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
               theme: theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -213,7 +225,7 @@ export default function createStyled() {
             variants: themeVariants
           }, _extends({}, props, {
             theme: theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.16.14
+ * @mui/system v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -64,7 +64,8 @@ export function unstable_createStyleFunctionSx() {
     var _ref4 = props || {},
       sx = _ref4.sx,
       _ref4$theme = _ref4.theme,
-      theme = _ref4$theme === void 0 ? {} : _ref4$theme;
+      theme = _ref4$theme === void 0 ? {} : _ref4$theme,
+      nested = _ref4.nested;
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
@@ -104,7 +105,8 @@ export function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme: theme
+                  theme: theme,
+                  nested: true
                 });
               } else {
                 css = merge(css, breakpointsValues);
@@ -115,6 +117,11 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
+        };
+      }
       return removeUnusedBreakpoints(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);

package/legacy/version/index.js

@@ -1,7 +1,7 @@
-export var version = "5.16.14";
+export var version = "5.18.0";
 export var major = Number("5");
-export var minor = Number("16");
-export var patch = Number("14");
+export var minor = Number("18");
+export var patch = Number("0");
 export var preReleaseLabel = undefined || null;
 export var preReleaseNumber = Number(undefined) || null;
 export default version;

package/modern/GlobalStyles/GlobalStyles.js

@@ -2,16 +2,40 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
+import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+function wrapGlobalLayer(styles) {
+  const serialized = serializeStyles(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = useTheme(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(styleArg => {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/_jsx(MuiGlobalStyles, {
     styles: globalStyles
   });

package/modern/ThemeProvider/ThemeProvider.js

@@ -9,6 +9,8 @@ import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
 import DefaultPropsProvider from '../DefaultPropsProvider';
+import useLayerOrder from './useLayerOrder';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -55,15 +57,16 @@ function ThemeProvider(props) {
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   const rtlValue = engineTheme.direction === 'rtl';
+  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+        children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
           value: engineTheme?.components,
-          children: children
+          children: [layerOrder, children]
         })
       })
     })

package/modern/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import GlobalStyles from '../GlobalStyles';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
+
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useLayerOrder(theme) {
+  const upperTheme = useThemeWithoutDefault();
+  const id = useId() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}

package/modern/createStyled.js

@@ -4,7 +4,7 @@ const _excluded = ["ownerState"],
   _excluded2 = ["variants"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
+import styledEngineStyled, { internal_processStyles as processStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -27,6 +27,13 @@ function isStringTag(tag) {
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 export const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -47,7 +54,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -58,7 +65,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -83,14 +90,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
+        const variantStyle = typeof variant.style === 'function' ? variant.style(_extends({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer(serializeStyles(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer(serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 export default function createStyled(input = {}) {
   const {
@@ -121,6 +129,7 @@ export default function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -158,13 +167,16 @@ export default function createStyled(input = {}) {
       // 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 stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return props => processStyleArg(stylesArg, _extends({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, _extends({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -186,7 +198,7 @@ export default function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -202,7 +214,7 @@ export default function createStyled(input = {}) {
             variants: themeVariants
           }, _extends({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.16.14
+ * @mui/system v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -63,7 +63,8 @@ export function unstable_createStyleFunctionSx() {
   function styleFunctionSx(props) {
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
@@ -104,7 +105,8 @@ export function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = merge(css, breakpointsValues);
@@ -115,6 +117,11 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
+        };
+      }
       return removeUnusedBreakpoints(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "5.16.14";
+export const version = "5.18.0";
 export const major = Number("5");
-export const minor = Number("16");
-export const patch = Number("14");
+export const minor = Number("18");
+export const patch = Number("0");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.16.14",
+  "version": "5.18.0",
   "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,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^5.16.14",
-    "@mui/styled-engine": "^5.16.14",
-    "@mui/utils": "^5.16.14",
-    "@mui/types": "^7.2.15"
+    "@mui/styled-engine": "^5.18.0",
+    "@mui/types": "~7.2.15",
+    "@mui/utils": "^5.17.1",
+    "@mui/private-theming": "^5.17.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styleFunctionSx/styleFunctionSx.js

@@ -72,7 +72,8 @@ function unstable_createStyleFunctionSx() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
@@ -113,7 +114,8 @@ function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = (0, _merge.default)(css, breakpointsValues);
@@ -124,6 +126,11 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css)
+        };
+      }
       return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);

package/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "5.16.14";
+const version = exports.version = "5.18.0";
 const major = exports.major = Number("5");
-const minor = exports.minor = Number("16");
-const patch = exports.patch = Number("14");
+const minor = exports.minor = Number("18");
+const patch = exports.patch = Number("0");
 const preReleaseLabel = exports.preReleaseLabel = undefined || null;
 const preReleaseNumber = exports.preReleaseNumber = Number(undefined) || null;
 var _default = exports.default = version;