[theme] Fix styleOverrides with nested selectors (#25156)

mui · Mar 4, 2021 · 3834108 · 3834108
1 parent 01fbe12
commit 3834108
Show file tree

Hide file tree

Showing 73 changed files with 759 additions and 504 deletions.
diff --git a/packages/material-ui-utils/src/deepmerge.test.ts b/packages/material-ui-utils/src/deepmerge.test.ts
@@ -20,4 +20,21 @@ describe('deepmerge', () => {
 
     expect(result.element).to.equal(element2);
   });
+
+  // https://github.com/mui-org/material-ui/issues/25075
+  it('should reset source when target is undefined', () => {
+    const result = deepmerge(
+      {
+        '&.Mui-disabled': {
+          color: 'red',
+        },
+      },
+      {
+        '&.Mui-disabled': undefined,
+      },
+    );
+    expect(result).to.deep.equal({
+      '&.Mui-disabled': undefined,
+    });
+  });
 });
diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js
@@ -15,11 +15,14 @@ import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...(!styleProps.square && styles.rounded),
-    ...(!styleProps.disableGutters && styles.gutters),
-    [`& .${accordionClasses.region}`]: styles.region,
-  });
+  return deepmerge(
+    {
+      ...(!styleProps.square && styles.rounded),
+      ...(!styleProps.disableGutters && styles.gutters),
+      [`& .${accordionClasses.region}`]: styles.region,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.js b/packages/material-ui/src/AccordionActions/AccordionActions.js
@@ -10,9 +10,12 @@ import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...(!styleProps.disableSpacing && styles.spacing),
-  });
+  return deepmerge(
+    {
+      ...(!styleProps.disableSpacing && styles.spacing),
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js
@@ -12,10 +12,13 @@ import accordionSummaryClasses, {
 } from './accordionSummaryClasses';
 
 const overridesResolver = (props, styles) => {
-  return deepmerge(styles.root || {}, {
-    [`& .${accordionSummaryClasses.content}`]: styles.content,
-    [`& .${accordionSummaryClasses.expandIconWrapper}`]: styles.expandIconWrapper,
-  });
+  return deepmerge(
+    {
+      [`& .${accordionSummaryClasses.content}`]: styles.content,
+      [`& .${accordionSummaryClasses.expandIconWrapper}`]: styles.expandIconWrapper,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js
@@ -19,13 +19,16 @@ import CloseIcon from '../internal/svg-icons/Close';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...styles[styleProps.variant],
-    ...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
-    [`& .${alertClasses.icon}`]: styles.icon,
-    [`& .${alertClasses.message}`]: styles.message,
-    [`& .${alertClasses.action}`]: styles.action,
-  });
+  return deepmerge(
+    {
+      ...styles[styleProps.variant],
+      ...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
+      [`& .${alertClasses.icon}`]: styles.icon,
+      [`& .${alertClasses.message}`]: styles.message,
+      [`& .${alertClasses.action}`]: styles.action,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
@@ -12,10 +12,13 @@ import { getAppBarUtilityClass } from './appBarClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...styles[`position${capitalize(styleProps.position)}`],
-    ...styles[`color${capitalize(styleProps.color)}`],
-  });
+  return deepmerge(
+    {
+      ...styles[`position${capitalize(styleProps.position)}`],
+      ...styles[`color${capitalize(styleProps.color)}`],
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -29,37 +29,40 @@ const overridesResolver = (props, styles) => {
     size,
   } = styleProps;
 
-  return deepmerge(styles.root || {}, {
-    ...(fullWidth && styles.fullWidth),
-    ...(hasPopupIcon && styles.hasPopupIcon),
-    ...(hasClearIcon && styles.hasClearIcon),
-    [`& .${autocompleteClasses.tag}`]: {
-      ...styles.tag,
-      ...styles[`tagSize${capitalize(size)}`],
-    },
-    [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot,
-    [`& .${autocompleteClasses.input}`]: {
-      ...styles.input,
-      ...(inputFocused && styles.inputFocused),
-    },
-    [`& .${autocompleteClasses.endAdornment}`]: styles.endAdornment,
-    [`& .${autocompleteClasses.clearIndicator}`]: styles.clearIndicator,
-    [`& .${autocompleteClasses.popupIndicator}`]: {
-      ...styles.popupIndicator,
-      ...(popupOpen && styles.popupIndicatorOpen),
-    },
-    [`& .${autocompleteClasses.popper}`]: {
-      ...styles.popper,
-      ...(disablePortal && styles.popperDisablePortal),
+  return deepmerge(
+    {
+      ...(fullWidth && styles.fullWidth),
+      ...(hasPopupIcon && styles.hasPopupIcon),
+      ...(hasClearIcon && styles.hasClearIcon),
+      [`& .${autocompleteClasses.tag}`]: {
+        ...styles.tag,
+        ...styles[`tagSize${capitalize(size)}`],
+      },
+      [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot,
+      [`& .${autocompleteClasses.input}`]: {
+        ...styles.input,
+        ...(inputFocused && styles.inputFocused),
+      },
+      [`& .${autocompleteClasses.endAdornment}`]: styles.endAdornment,
+      [`& .${autocompleteClasses.clearIndicator}`]: styles.clearIndicator,
+      [`& .${autocompleteClasses.popupIndicator}`]: {
+        ...styles.popupIndicator,
+        ...(popupOpen && styles.popupIndicatorOpen),
+      },
+      [`& .${autocompleteClasses.popper}`]: {
+        ...styles.popper,
+        ...(disablePortal && styles.popperDisablePortal),
+      },
+      [`& .${autocompleteClasses.paper}`]: styles.paper,
+      [`& .${autocompleteClasses.listbox}`]: styles.listbox,
+      [`& .${autocompleteClasses.loading}`]: styles.loading,
+      [`& .${autocompleteClasses.noOptions}`]: styles.noOptions,
+      [`& .${autocompleteClasses.option}`]: styles.option,
+      [`& .${autocompleteClasses.groupLabel}`]: styles.groupLabel,
+      [`& .${autocompleteClasses.groupUl}`]: styles.groupUl,
     },
-    [`& .${autocompleteClasses.paper}`]: styles.paper,
-    [`& .${autocompleteClasses.listbox}`]: styles.listbox,
-    [`& .${autocompleteClasses.loading}`]: styles.loading,
-    [`& .${autocompleteClasses.noOptions}`]: styles.noOptions,
-    [`& .${autocompleteClasses.option}`]: styles.option,
-    [`& .${autocompleteClasses.groupLabel}`]: styles.groupLabel,
-    [`& .${autocompleteClasses.groupUl}`]: styles.groupUl,
-  });
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
@@ -11,12 +11,15 @@ import avatarClasses, { getAvatarUtilityClass } from './avatarClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...styles[styleProps.variant],
-    ...(styleProps.colorDefault && styles.colorDefault),
-    [`& .${avatarClasses.img}`]: styles.img,
-    [`& .${avatarClasses.fallback}`]: styles.fallback,
-  });
+  return deepmerge(
+    {
+      ...styles[styleProps.variant],
+      ...(styleProps.colorDefault && styles.colorDefault),
+      [`& .${avatarClasses.img}`]: styles.img,
+      [`& .${avatarClasses.fallback}`]: styles.fallback,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.js
@@ -15,9 +15,12 @@ const SPACINGS = {
 };
 
 const overridesResolver = (props, styles) => {
-  return deepmerge(styles.root || {}, {
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
-  });
+  return deepmerge(
+    {
+      [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -12,9 +12,12 @@ export const backdropClasses = backdropUnstyledClasses;
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...(styleProps.invisible && styles.invisible),
-  });
+  return deepmerge(
+    {
+      ...(styleProps.invisible && styles.invisible),
+    },
+    styles.root || {},
+  );
 };
 
 const extendUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -22,19 +22,22 @@ const RADIUS_DOT = 4;
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    [`& .${badgeClasses.badge}`]: {
-      ...styles.badge,
-      ...styles[styleProps.variant],
-      ...styles[
-        `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize(
-          styleProps.anchorOrigin.horizontal,
-        )}${capitalize(styleProps.overlap)}`
-      ],
-      ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]),
-      ...(styleProps.invisible && styles.invisible),
+  return deepmerge(
+    {
+      [`& .${badgeClasses.badge}`]: {
+        ...styles.badge,
+        ...styles[styleProps.variant],
+        ...styles[
+          `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize(
+            styleProps.anchorOrigin.horizontal,
+          )}${capitalize(styleProps.overlap)}`
+        ],
+        ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]),
+        ...(styleProps.invisible && styles.invisible),
+      },
     },
-  });
+    styles.root || {},
+  );
 };
 
 const extendUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -14,11 +14,14 @@ import bottomNavigationActionClasses, {
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly),
-    [`& .${bottomNavigationActionClasses.wrapper}`]: styles.wrapper,
-    [`& .${bottomNavigationActionClasses.label}`]: styles.label,
-  });
+  return deepmerge(
+    {
+      ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly),
+      [`& .${bottomNavigationActionClasses.wrapper}`]: styles.wrapper,
+      [`& .${bottomNavigationActionClasses.label}`]: styles.label,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -11,11 +11,14 @@ import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 
 const overridesResolver = (props, styles) => {
-  return deepmerge(styles.root || {}, {
-    [`& .${breadcrumbsClasses.ol}`]: styles.ol,
-    [`& .${breadcrumbsClasses.li}`]: styles.li,
-    [`& .${breadcrumbsClasses.separator}`]: styles.separator,
-  });
+  return deepmerge(
+    {
+      [`& .${breadcrumbsClasses.ol}`]: styles.ol,
+      [`& .${breadcrumbsClasses.li}`]: styles.li,
+      [`& .${breadcrumbsClasses.separator}`]: styles.separator,
+    },
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -13,24 +13,27 @@ import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...styles[styleProps.variant],
-    ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`],
-    ...styles[`size${capitalize(styleProps.size)}`],
-    ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`],
-    ...(styleProps.color === 'inherit' && styles.colorInherit),
-    ...(styleProps.disableElevation && styles.disableElevation),
-    ...(styleProps.fullWidth && styles.fullWidth),
-    [`& .${buttonClasses.label}`]: styles.label,
-    [`& .${buttonClasses.startIcon}`]: {
-      ...styles.startIcon,
-      ...styles[`iconSize${capitalize(styleProps.size)}`],
-    },
-    [`& .${buttonClasses.endIcon}`]: {
-      ...styles.endIcon,
-      ...styles[`iconSize${capitalize(styleProps.size)}`],
+  return deepmerge(
+    {
+      ...styles[styleProps.variant],
+      ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`],
+      ...styles[`size${capitalize(styleProps.size)}`],
+      ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`],
+      ...(styleProps.color === 'inherit' && styles.colorInherit),
+      ...(styleProps.disableElevation && styles.disableElevation),
+      ...(styleProps.fullWidth && styles.fullWidth),
+      [`& .${buttonClasses.label}`]: styles.label,
+      [`& .${buttonClasses.startIcon}`]: {
+        ...styles.startIcon,
+        ...styles[`iconSize${capitalize(styleProps.size)}`],
+      },
+      [`& .${buttonClasses.endIcon}`]: {
+        ...styles.endIcon,
+        ...styles[`iconSize${capitalize(styleProps.size)}`],
+      },
     },
-  });
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js
@@ -13,19 +13,22 @@ import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupCla
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(styles.root || {}, {
-    ...styles[styleProps.variant],
-    ...(styleProps.disableElevation === true && styles.disableElevation),
-    ...(styleProps.fullWidth && styles.fullWidth),
-    ...(styleProps.orientation === 'vertical' && styles.vertical),
-    [`& .${buttonGroupClasses.grouped}`]: {
-      ...styles.grouped,
-      ...styles[`grouped${capitalize(styleProps.orientation)}`],
-      ...styles[`grouped${capitalize(styleProps.variant)}`],
-      ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.orientation)}`],
-      ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.color)}`],
+  return deepmerge(
+    {
+      ...styles[styleProps.variant],
+      ...(styleProps.disableElevation === true && styles.disableElevation),
+      ...(styleProps.fullWidth && styles.fullWidth),
+      ...(styleProps.orientation === 'vertical' && styles.vertical),
+      [`& .${buttonGroupClasses.grouped}`]: {
+        ...styles.grouped,
+        ...styles[`grouped${capitalize(styleProps.orientation)}`],
+        ...styles[`grouped${capitalize(styleProps.variant)}`],
+        ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.orientation)}`],
+        ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.color)}`],
+      },
     },
-  });
+    styles.root || {},
+  );
 };
 
 const useUtilityClasses = (styleProps) => {