@mui/material 5.15.5 → 5.15.6

package/PaginationItem/PaginationItem.js

@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `color${capitalize(color)}`, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/PaginationItem/paginationItemClasses.d.ts

@@ -9,15 +9,27 @@ export interface PaginationItemClasses {
     sizeLarge: string;
     /** Styles applied to the root element if `variant="text"`. */
     text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     textSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     outlinedSecondary: string;
     /** Styles applied to the root element if `rounded="true"`. */
     rounded: string;
@@ -35,6 +47,10 @@ export interface PaginationItemClasses {
     selected: string;
     /** Styles applied to the icon to display. */
     icon: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
 }
 export type PaginationItemClassKey = keyof PaginationItemClasses;
 export declare function getPaginationItemUtilityClass(slot: string): string;

package/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/README.md

@@ -1,11 +1,11 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
-<h1 align="center">Material UI</h1>
+<h1 align="center">Material UI</h1>
 
-Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
+Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
 
 ## Installation
 
@@ -26,13 +26,13 @@ Use the "material-ui" tag on Stack Overflow to make it easier for the community
 
 ## Examples
 
-Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
+Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
 
 ## Contributing
 
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
-Contributing to Material UI is about more than just issues and pull requests!
+Contributing to Material UI is about more than just issues and pull requests!
 There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog

package/Rating/Rating.js

@@ -75,6 +75,7 @@ const RatingRoot = styled('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/TablePagination/TablePagination.d.ts

@@ -114,7 +114,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * Use -1 for the value with a custom label to show all the rows.
    * @default [10, 25, 50, 100]
    */
-  rowsPerPageOptions?: Array<number | { value: number; label: string }>;
+  rowsPerPageOptions?: ReadonlyArray<number | { value: number; label: string }>;
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
    *

package/index.js

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

package/legacy/Avatar/Avatar.js

@@ -30,9 +30,8 @@ var AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
@@ -45,18 +44,36 @@ var AvatarRoot = styled('div', {
     lineHeight: 1,
     borderRadius: '50%',
     overflow: 'hidden',
-    userSelect: 'none'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.variant === 'square' && {
-    borderRadius: 0
-  }, ownerState.colorDefault && _extends({
-    color: (theme.vars || theme).palette.background.default
-  }, theme.vars ? {
-    backgroundColor: theme.vars.palette.Avatar.defaultBg
-  } : {
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-  }));
+    userSelect: 'none',
+    variants: [{
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: {
+        variant: 'square'
+      },
+      style: {
+        borderRadius: 0
+      }
+    }, {
+      props: {
+        colorDefault: true
+      },
+      style: _extends({
+        color: (theme.vars || theme).palette.background.default
+      }, theme.vars ? {
+        backgroundColor: theme.vars.palette.Avatar.defaultBg
+      } : _extends({
+        backgroundColor: theme.palette.grey[400]
+      }, theme.applyDarkStyles({
+        backgroundColor: theme.palette.grey[600]
+      })))
+    }]
+  };
 });
 var AvatarImg = styled('img', {
   name: 'MuiAvatar',

package/legacy/PaginationItem/PaginationItem.js

@@ -34,7 +34,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     type = ownerState.type,
     variant = ownerState.variant;
   var slots = {
-    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
+    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "color".concat(capitalize(color)), color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/legacy/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/legacy/Rating/Rating.js

@@ -69,6 +69,7 @@ var RatingRoot = styled('span', {
     color: '#faaf00',
     cursor: 'pointer',
     textAlign: 'left',
+    width: 'min-content',
     WebkitTapHighlightColor: 'transparent'
   }, "&.".concat(ratingClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/legacy/index.js

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

package/legacy/styles/createTheme.js

@@ -37,7 +37,19 @@ function createTheme() {
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles: function applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        var selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return _defineProperty({}, selector, css);
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/modern/Avatar/Avatar.js

@@ -35,9 +35,8 @@ const AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -50,18 +49,36 @@ const AvatarRoot = styled('div', {
   lineHeight: 1,
   borderRadius: '50%',
   overflow: 'hidden',
-  userSelect: 'none'
-}, ownerState.variant === 'rounded' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === 'square' && {
-  borderRadius: 0
-}, ownerState.colorDefault && _extends({
-  color: (theme.vars || theme).palette.background.default
-}, theme.vars ? {
-  backgroundColor: theme.vars.palette.Avatar.defaultBg
-} : {
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-})));
+  userSelect: 'none',
+  variants: [{
+    props: {
+      variant: 'rounded'
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'square'
+    },
+    style: {
+      borderRadius: 0
+    }
+  }, {
+    props: {
+      colorDefault: true
+    },
+    style: _extends({
+      color: (theme.vars || theme).palette.background.default
+    }, theme.vars ? {
+      backgroundColor: theme.vars.palette.Avatar.defaultBg
+    } : _extends({
+      backgroundColor: theme.palette.grey[400]
+    }, theme.applyDarkStyles({
+      backgroundColor: theme.palette.grey[600]
+    })))
+  }]
+}));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
   slot: 'Img',

package/modern/PaginationItem/PaginationItem.js

@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `color${capitalize(color)}`, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/modern/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/modern/Rating/Rating.js

@@ -75,6 +75,7 @@ const RatingRoot = styled('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/modern/index.js

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

package/modern/styles/createTheme.js

@@ -32,7 +32,21 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);

package/node/Avatar/Avatar.js

@@ -43,9 +43,8 @@ const AvatarRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -58,18 +57,36 @@ const AvatarRoot = (0, _styled.default)('div', {
   lineHeight: 1,
   borderRadius: '50%',
   overflow: 'hidden',
-  userSelect: 'none'
-}, ownerState.variant === 'rounded' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === 'square' && {
-  borderRadius: 0
-}, ownerState.colorDefault && (0, _extends2.default)({
-  color: (theme.vars || theme).palette.background.default
-}, theme.vars ? {
-  backgroundColor: theme.vars.palette.Avatar.defaultBg
-} : {
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-})));
+  userSelect: 'none',
+  variants: [{
+    props: {
+      variant: 'rounded'
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'square'
+    },
+    style: {
+      borderRadius: 0
+    }
+  }, {
+    props: {
+      colorDefault: true
+    },
+    style: (0, _extends2.default)({
+      color: (theme.vars || theme).palette.background.default
+    }, theme.vars ? {
+      backgroundColor: theme.vars.palette.Avatar.defaultBg
+    } : (0, _extends2.default)({
+      backgroundColor: theme.palette.grey[400]
+    }, theme.applyDarkStyles({
+      backgroundColor: theme.palette.grey[600]
+    })))
+  }]
+}));
 const AvatarImg = (0, _styled.default)('img', {
   name: 'MuiAvatar',
   slot: 'Img',

package/node/PaginationItem/PaginationItem.js

@@ -45,7 +45,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${(0, _capitalize.default)(size)}`, variant, shape, color !== 'standard' && `${variant}${(0, _capitalize.default)(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${(0, _capitalize.default)(size)}`, variant, shape, color !== 'standard' && `color${(0, _capitalize.default)(color)}`, color !== 'standard' && `${variant}${(0, _capitalize.default)(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/node/PaginationItem/paginationItemClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getPaginationItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPaginationItem', slot);
 }
-const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 var _default = exports.default = paginationItemClasses;

package/node/Rating/Rating.js

@@ -82,6 +82,7 @@ const RatingRoot = (0, _styled.default)('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${_ratingClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/node/index.js

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

package/node/styles/createTheme.js

@@ -40,7 +40,21 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
     shadows: _shadows.default.slice(),
     typography: (0, _createTypography.default)(palette, typographyInput),
     transitions: (0, _createTransitions.default)(transitionsInput),
-    zIndex: (0, _extends2.default)({}, _zIndex.default)
+    zIndex: (0, _extends2.default)({}, _zIndex.default),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = (0, _utils.deepmerge)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.5",
+  "version": "5.15.6",
   "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.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.32",
-    "@mui/core-downloads-tracker": "^5.15.5",
-    "@mui/system": "^5.15.5",
-    "@mui/utils": "^5.15.5",
-    "@mui/types": "^7.2.13"
+    "@mui/base": "5.0.0-beta.33",
+    "@mui/core-downloads-tracker": "^5.15.6",
+    "@mui/system": "^5.15.6",
+    "@mui/types": "^7.2.13",
+    "@mui/utils": "^5.15.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/createTheme.d.ts

@@ -45,6 +45,7 @@ export interface Theme extends BaseTheme {
   components?: Components<BaseTheme>;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;
   unstable_sxConfig: SxConfig;
+  applyDarkStyles: (css: CSSObject) => CSSObject;
 }
 
 /**

package/styles/createTheme.js

@@ -32,7 +32,21 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);