[material-ui][Stepper] Not generating a utility class for `nonLinear`

[alexismo]

Summary

When using <Stepper nonLinear Stepper's html markup does not gain a MuiStepper-nonLinear class. When used along with alternativeLabel, making it disproportionately difficult to style StepButton differently based on the nonLinear prop.

I acknowledge this issue resembles #17367. We are trying to target the styles of StepConnector without providing a custom implementation of StepConnector.

Examples

Motivation

For our nonLinear Stepper, since the Steps do not represent linear progression, we want to style Steps in a way where they appear related to each other and where each Step is not dependent on the previous steps.

Search keywords: stepper nonLinear utilityClass utility class

[DiegoAndai]

Hey @alexismo, thanks for the report! I understand the issue but could you provide a minimal reproduction? This would help us understand the use case better. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[alexismo]

Sure thing! @DiegoAndai, here you are: https://stackblitz.com/edit/stackblitz-starters-3a8adj?file=src%2FApp.tsx

[alexismo]

@danilo-leal should I wait for the maintainer's response before submitting a PR to material-ui?

[ZeeshanTamboli]

I think we can add this class. @alexismo, feel free to create a PR; I'll mark it as an enhancement.

You can also use theme variants:

const theme = createTheme({
  components: {
    MuiStep: {
      styleOverrides: {
        root: {
          '&[class*="Mui-completed"]': {
            '& [class*="MuiStepConnector-line"]': {
              borderColor: 'green',
              borderWidth: '3px',
            },
          },
        },
      },
    },
    MuiStepConnector: {
      styleOverrides: {
        line: {
          borderWidth: '2px',
          borderColor: 'darkgrey',
        },
      },
    },
    MuiStepper: {
      variants: [
        {
          props: { nonLinear: true },
          style: {
            border: '2px solid red',
          },
        },
      ],
    },
  },
});

However, if I understood your use case correctly, if you want to target individual steps in a non-linear stepper, the above theme variants won't work.