[Stepper] Cannot customize StepIcon via rule name for style override

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The StepIcon’s completed property does not have the override style applied.

Expected Behavior 🤔

The StepIcon’s completed property should have the override style applied. For example, the icon color should be green on completed={true} if the theme override has color: "green".

Steps to Reproduce 🕹

https://codesandbox.io/s/epic-hawking-ijkyj?file=/src/App.tsx

    MuiStepIcon: {
      styleOverrides: {
        completed: {
          color: "green",
        },
      },
    },

Using the rule name of the component’s styleOverrides property in a custom theme is not applied.

[siriwatknp]

Summary of this issue

to customize completed state for StepIcon, use pseudo class stepIconClasses.completed or 'Mui-completed'.

MuiStepIcon: {
  styleOverrides: {
    root: {
      '&.Mui-completed': {
        color: 'forestgreen',
      }
    },
  },
},

[michal-perlakowski]

@siriwatknp That fix doesn’t seem to be working. Based on the Dialog implementation, I think it should be like this:

diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js
--- a/packages/material-ui/src/StepIcon/StepIcon.js	(revision 6ef3bbe657c9447d649ef044d45e9bdec2c5d86d)
+++ b/packages/material-ui/src/StepIcon/StepIcon.js	(date 1624528599570)
@@ -23,17 +23,20 @@
 const StepIconRoot = styled(SvgIcon, {
   name: 'MuiStepIcon',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
+  overridesResolver: ({ styleProps }, styles) => ([
+    styles.root,
+    (styleProps.completed && styles.completed),
+  ]),
+})(({ theme, styleProps }) => ({
   /* Styles applied to the root element. */
   display: 'block',
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest,
   }),
   color: theme.palette.text.disabled,
-  [`&.${stepIconClasses.completed}`]: {
+  ...(styleProps.completed && {
     color: theme.palette.primary.main,
-  },
+  }),
   [`&.${stepIconClasses.active}`]: {
     color: theme.palette.primary.main,
   },