Impossible to wrap Header, Content and Footer

[Foprta]

It's impossible to wraph Header, Content and Footer with custom components.

Because of te getItem realization its impossible to render something like that:

const CustomHeader = (props) => {
  return <Header className="my-custom-class" {...props}/>
}

<Portal>
  <Sheet>
    <CustomHeader />
  </Sheet>
</Portal>

May be we could rely on displayName or smth like that instead of type in getItem?

const getItem = (
   ...
   child.type === Component
   ...
}

[woofers]

@Foprta Thanks for the report, I would be a bit hesitant to rely on displayName as it may cause the wrong components to be inadvertently picked up depending on the name.

Instead I would be open to adding some kind of CustomerHeader.sheetElement = "Header" API but at the moment I don't have any immediately plans to implement this.

As a workaround I would maybe opt for some kind of API like: <Header {...getCustomerHeaderProps({ className: '' })} />