[Stepper] Remove Paper component

[eedrah]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Would it be a good idea if accepts a component prop? By default, this would be <Paper>

Examples 🌈

<Stepper component="div">
    <Step>
        <StepLabel>Hello world</StepLabel>
    </Step>
</Stepper>

Motivation 🔦

I want to render a Stepper that doesn't use Paper - essentially I want it to have very plain styling and not be affected by any global styling that I do to the Paper component.

I believe there isn't a straightforward way to do this already, and was thinking that if we could pass a component to Stepper (which would default to <Paper>) then that would be similar to other components that take a prop that selects the inner component rendered.

[eedrah]

Current workaround

Giving an override of no border or background for Stepper in the theme definition.

  overrides: {
    MuiStepper: {
      root: {
        background: 'none',
        border: 'none',
      },
    },
  },

It does the trick well enough for now, but I can foresee issues coming later when I add a bit more complicated CSS to the Paper component (which I don't want Stepper receiving)

[mbrookes]

If Paper is removed, does Stepper need a component prop? It can just be "wrapped in paper" (with ribbon and a bow 🙂 ):

<Paper>
  <Stepper>
    <Step>
      <StepLabel>Hello world</StepLabel>
    </Step>
  </Stepper>
<Paper>

[oliviertassinari]

In the unknown, we can start without a component prop, and wait for a solid use case from a developer?

[mbrookes]

Yep, it's the approach @eps1lon has advocated for.