Material-ui: [Stepper] Breadcrumb like

[bluepeter]

Upgrading from 3.1.1. to 3.2.0, we now get warnings when we use a Stepper with a custom connector like this:

import { ChevronRight } from "mdi-material-ui";

// ...

<Stepper className="breadcrumb" connector={<ChevronRight />}>
  {arr.map(item => item)}
</Stepper>

The warnings we receive are:

We've tried multiple solutions here, none successful.

[eps1lon]

How is the interface for ChevronRight defined? We are passing some state related props to the connector and if you pass them through to the dom you will get those warnings.

We should maybe add an interface definition to the docs.

[oliviertassinari]

@bluepeter This is smart, I never thought of using the stepper for building a breadcrumb component #8818. You have to do something like:

import { ChevronRight } from "mdi-material-ui";

const Connector = () => <ChevronRight />;

<Stepper className="breadcrumb" connector={<Connector />}>
  {arr.map(item => item)}
</Stepper>

[mbrookes]

Could we add it to the docs as a customization example, which would close #8818?

[bluepeter]

Thanks @oliviertassinari your solution fixes this issue for me.

Per @mbrookes note, I think the Stepper works nicely as Breadcrumbs.

Closing.

[oliviertassinari]

I agree with @mbrookes, I think that we could add a demo about it.

[bdeloeste]

I'd like to have a go at this issue 😄

[oliviertassinari]

We have introduced a new Breadcrumb component #14084.