@mui/material 6.4.12 → 6.5.0

package/Breadcrumbs/BreadcrumbCollapsed.js

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

package/CHANGELOG.md

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

package/NativeSelect/NativeSelectInput.js

@@ -25,7 +25,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const StyledSelectSelect = styled('select')(({
+export const StyledSelectSelect = styled('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -99,7 +101,9 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
     }];
   }
 })({});
-export const StyledSelectIcon = styled('svg')(({
+export const StyledSelectIcon = styled('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/OutlinedInput/NotchedOutline.js

@@ -8,6 +8,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -26,6 +27,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx, 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)(memoTheme(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(memoTheme(({
   theme
 }) => ({
   left: 0,

package/SwipeableDrawer/SwipeArea.js

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

package/index.js

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

package/internal/SwitchBase.js

@@ -26,7 +26,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -64,6 +66,7 @@ const SwitchBaseRoot = styled(ButtonBase)({
   }]
 });
 const SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

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

package/modern/NativeSelect/NativeSelectInput.js

@@ -25,7 +25,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const StyledSelectSelect = styled('select')(({
+export const StyledSelectSelect = styled('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -99,7 +101,9 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
     }];
   }
 })({});
-export const StyledSelectIcon = styled('svg')(({
+export const StyledSelectIcon = styled('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/modern/OutlinedInput/NotchedOutline.js

@@ -8,6 +8,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -26,6 +27,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/modern/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx, 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)(memoTheme(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(memoTheme(({
   theme
 }) => ({
   left: 0,

package/modern/SwipeableDrawer/SwipeArea.js

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

package/modern/index.js

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

package/modern/internal/SwitchBase.js

@@ -26,7 +26,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -64,6 +66,7 @@ const SwitchBaseRoot = styled(ButtonBase)({
   }]
 });
 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|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|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,6 +1,6 @@
-export const version = "6.4.12";
+export const version = "6.5.0";
 export const major = Number("6");
-export const minor = Number("4");
-export const patch = Number("12");
+export const minor = Number("5");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -15,7 +15,9 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
-const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default)((0, _memoTheme.default)(({
+const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  name: 'MuiBreadcrumbCollapsed'
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   display: 'flex',

package/node/NativeSelect/NativeSelectInput.js

@@ -32,7 +32,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
 };
-const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)('select')(({
+const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -106,7 +108,9 @@ const NativeSelectSelect = (0, _zeroStyled.styled)(StyledSelectSelect, {
     }];
   }
 })({});
-const StyledSelectIcon = exports.StyledSelectIcon = (0, _zeroStyled.styled)('svg')(({
+const StyledSelectIcon = exports.StyledSelectIcon = (0, _zeroStyled.styled)('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/node/OutlinedInput/NotchedOutline.js

@@ -15,6 +15,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   textAlign: 'left',
@@ -33,6 +34,7 @@ const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _rootShouldForwardProp.default
 })((0, _memoTheme.default)(({
   theme

package/node/Radio/RadioButtonIcon.js

@@ -16,16 +16,21 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default)({
+const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)((0, _memoTheme.default)(({
+const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default, {
+  name: 'MuiRadioButtonIcon'
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   left: 0,

package/node/SwipeableDrawer/SwipeArea.js

@@ -17,6 +17,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Drawer = require("../Drawer/Drawer");
 var _jsxRuntime = require("react/jsx-runtime");
 const SwipeAreaRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: _rootShouldForwardProp.default
 })((0, _memoTheme.default)(({
   theme

package/node/index.js

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

package/node/internal/SwitchBase.js

@@ -33,7 +33,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _switchBaseClasses.getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default)({
+const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -71,6 +73,7 @@ const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default)({
   }]
 });
 const SwitchBaseInput = (0, _zeroStyled.styled)('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   cursor: 'inherit',

package/node/styles/shouldSkipGeneratingVar.js

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

package/node/version/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.12",
+  "version": "6.5.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/system": "^6.4.12",
-    "@mui/core-downloads-tracker": "^6.4.12",
-    "@mui/types": "~7.2.24",
-    "@mui/utils": "^6.4.9"
+    "@mui/core-downloads-tracker": "^6.5.0",
+    "@mui/utils": "^6.4.9",
+    "@mui/system": "^6.5.0",
+    "@mui/types": "~7.2.24"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.4.12"
+    "@mui/material-pigment-css": "^6.5.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.d.ts

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

package/styles/shouldSkipGeneratingVar.js

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

package/version/index.js

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