@mui/material 5.17.1 → 5.18.0

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -10,7 +10,9 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase)(({
+const BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(({
   theme
 }) => _extends({
   display: 'flex',

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # [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 -->

package/OutlinedInput/NotchedOutline.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -27,6 +28,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(({
   ownerState,

package/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
+const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(({
   theme,
   ownerState
 }) => _extends({

package/SwipeableDrawer/SwipeArea.js

@@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(({
   theme,

package/index.js

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

package/internal/SwitchBase.js

@@ -29,7 +29,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)(({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})(({
   ownerState
 }) => _extends({
   padding: 9,
@@ -40,6 +42,7 @@ const SwitchBaseRoot = styled(ButtonBase)(({
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
 const SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/legacy/Breadcrumbs/BreadcrumbCollapsed.js

@@ -9,7 +9,9 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BreadcrumbCollapsedButton = styled(ButtonBase)(function (_ref) {
+var BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',

package/legacy/OutlinedInput/NotchedOutline.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 var NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -26,6 +27,7 @@ var NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 var NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(function (_ref) {
   var ownerState = _ref.ownerState,

package/legacy/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var RadioButtonIconRoot = styled('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
+var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-var RadioButtonIconDot = styled(RadioButtonCheckedIcon)(function (_ref) {
+var RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(function (_ref) {
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   return _extends({

package/legacy/SwipeableDrawer/SwipeArea.js

@@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 var SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(function (_ref) {
   var theme = _ref.theme,

package/legacy/index.js

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

package/legacy/internal/SwitchBase.js

@@ -27,7 +27,9 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-var SwitchBaseRoot = styled(ButtonBase)(function (_ref) {
+var SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({
     padding: 9,
@@ -39,6 +41,7 @@ var SwitchBaseRoot = styled(ButtonBase)(function (_ref) {
   });
 });
 var SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/legacy/styles/shouldSkipGeneratingVar.js

@@ -1,6 +1,6 @@
 export default function shouldSkipGeneratingVar(keys) {
   var _keys$;
-  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|modularCssLayers|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 }

package/legacy/version/index.js

@@ -1,7 +1,7 @@
-export var version = "5.17.1";
+export var version = "5.18.0";
 export var major = Number("5");
-export var minor = Number("17");
-export var patch = Number("1");
+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/Breadcrumbs/BreadcrumbCollapsed.js

@@ -10,7 +10,9 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase)(({
+const BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(({
   theme
 }) => _extends({
   display: 'flex',

package/modern/OutlinedInput/NotchedOutline.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -27,6 +28,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(({
   ownerState,

package/modern/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
+const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(({
   theme,
   ownerState
 }) => _extends({

package/modern/SwipeableDrawer/SwipeArea.js

@@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(({
   theme,

package/modern/index.js

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

package/modern/internal/SwitchBase.js

@@ -29,7 +29,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)(({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})(({
   ownerState
 }) => _extends({
   padding: 9,
@@ -40,6 +42,7 @@ const SwitchBaseRoot = styled(ButtonBase)(({
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
 const SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/modern/styles/shouldSkipGeneratingVar.js

@@ -1,5 +1,5 @@
 export default function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|modularCssLayers|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "5.17.1";
+export const version = "5.18.0";
 export const major = Number("5");
-export const minor = Number("17");
-export const patch = Number("1");
+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/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -18,7 +18,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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; }
-const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
+const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default, {
+  name: 'MuiBreadcrumbCollapsed'
+})(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',

package/node/OutlinedInput/NotchedOutline.js

@@ -17,6 +17,7 @@ const _excluded = ["children", "classes", "className", "label", "notched"];
 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; }
 const NotchedOutlineRoot = (0, _styled.default)('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _styled.rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -35,6 +36,7 @@ const NotchedOutlineRoot = (0, _styled.default)('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = (0, _styled.default)('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _styled.rootShouldForwardProp
 })(({
   ownerState,

package/node/Radio/RadioButtonIcon.js

@@ -16,16 +16,21 @@ 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; }
 const RadioButtonIconRoot = (0, _styled.default)('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: _styled.rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default)({
+const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default)(({
+const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default, {
+  name: 'MuiRadioButtonIcon'
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/SwipeableDrawer/SwipeArea.js

@@ -19,6 +19,7 @@ const _excluded = ["anchor", "classes", "className", "width", "style"];
 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; }
 const SwipeAreaRoot = (0, _styled.default)('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: _styled.rootShouldForwardProp
 })(({
   theme,

package/node/index.js

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

package/node/internal/SwitchBase.js

@@ -36,7 +36,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _switchBaseClasses.getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default)(({
+const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default, {
+  name: 'MuiSwitchBase'
+})(({
   ownerState
 }) => (0, _extends2.default)({
   padding: 9,
@@ -47,6 +49,7 @@ const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default)(({
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
 const SwitchBaseInput = (0, _styled.default)('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: _styled.rootShouldForwardProp
 })({
   cursor: 'inherit',

package/node/styles/shouldSkipGeneratingVar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = shouldSkipGeneratingVar;
 function shouldSkipGeneratingVar(keys) {
   var _keys$;
-  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|modularCssLayers|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 }

package/node/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.17.1";
+const version = exports.version = "5.18.0";
 const major = exports.major = Number("5");
-const minor = exports.minor = Number("17");
-const patch = exports.patch = Number("1");
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.17.1",
+  "version": "5.18.0",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^5.17.1",
-    "@mui/system": "^5.17.1",
+    "@mui/system": "^5.18.0",
     "@mui/types": "~7.2.15",
-    "@mui/utils": "^5.17.1"
+    "@mui/utils": "^5.17.1",
+    "@mui/core-downloads-tracker": "^5.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/createTheme.d.ts

@@ -23,6 +23,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   zIndex?: ZIndexOptions;
   unstable_strictMode?: boolean;
   unstable_sxConfig?: SxConfig;
+  modularCssLayers?: boolean | string;
 }
 
 interface BaseTheme extends SystemTheme {

package/styles/experimental_extendTheme.d.ts

@@ -297,6 +297,11 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    *        value = 'var(--test)'
    */
   shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+  /**
+   * Whether to use modular CSS layers.
+   * @default false
+   */
+  modularCssLayers?: boolean | string;
 }
 
 // should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function

package/styles/shouldSkipGeneratingVar.js

@@ -1,6 +1,6 @@
 export default function shouldSkipGeneratingVar(keys) {
   var _keys$;
-  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|modularCssLayers|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 }