overridesResolver

Initial implementation example:

const overridesResolver = (props, styles) => {
  const { styleProps } = props;

  return deepmerge(styles.root || {}, {
    ...styles[styleProps.variant],
    [`& .${buttonClasses.label}`]: styles.label,
    [`& .${buttonClasses.startIcon}`]: {
      ...styles.startIcon,
      ...styles[`iconSize${capitalize(styleProps.size)}`],
    },
  });
};

Problems:

Line 6 results in

    [`& .MuiButton-label`]: undefined,

which overrides any definition inside the root:

const themeOverrides = createMuiTheme({
    components: {
        MuiButton: {
            styleOverrides: {
                root: {
                    '& .MuiButton-label': {
                        // some overrides
                    }
                }
            }
        }
    }
})

Issue - https://github.com/mui-org/material-ui/issues/25075 cannot override using & .MuiButton-label. Proposed fix https://github.com/mui-org/material-ui/issues/25075#issuecomment-787495208

This creates another problem:

Currently if we do:

const theme = createMuiTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          border: "2px dashed grey"
        },
        contained: {
          // shouldn't this win?
          border: "none"
        }
      }
    }
  }
});

The styles defined under root win which is not intuitive at all. I know we came again to this multiple time, but it's important to get it right. Proposed fix:

const overridesResolver = (props, styles) => {
  const { styleProps } = props;
  return ({
    // Apply first overrides, then root
    [`& .${buttonClasses.label}`]: styles.label,
    [`& .${buttonClasses.startIcon}`]: {
      ...styles.startIcon,
      ...styles[`iconSize${capitalize(styleProps.size)}`],
     },
    ...styles.root,
    ...styles[styleProps.variant],
  });
 };

Alternative solution (not sure what the perf cost would be):

const overridesResolver = (props, styles) => {
  const { styleProps } = props;
  return ({
    // Apply first overrides, then root
-   [`& .${buttonClasses.label}`]: styles.label,
-   [`& .${buttonClasses.startIcon}`]: {
-     ...styles.startIcon,
-     ...styles[`iconSize${capitalize(styleProps.size)}`],
-    },
    ...styles.root,
    ...styles[styleProps.variant],
  });
 };

const ButtonLabel = experimentalStyled(
  'span',
  {},
  {
    name: 'MuiButton',
    slot: 'Label',
+   overridesResolver: (props, styles) => styles.label,
  },
)(({ theme }) => ({
  // label styles
}));

const ButtonStartIcon = experimentalStyled(
  'svg',
  {},
  {
    name: 'MuiButton',
    slot: 'StartIcon',
+   overridesResolver: (props, styles) => ({
+     ...styles.startIcon,
+     ...styles[`iconSize${capitalize(styleProps.size)}`],
+   }),
+ },
)(({ theme }) => ({
  // label styles
}));