[docs] Add TypeScript guide on the polymorphic components

[mnajdova]

Related to #31314, #31976

Looks like this applies for the base components too, maybe would be worth adding it there too cc @michaldudak

Here is a codendbox describing the issue and the suggested solution:
https://codesandbox.io/s/amazing-lucy-rs38sz?file=/src/App.tsx

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 517bbd5

[michaldudak]

@mnajdova The codesandbox you linked here has an issue - in lines 9 and 10 a Button is wrapped in styled, not ButtonUnstyled. Correcting it makes it work without errors.

This is likely because ButtonUnstyled does not inherit from OverridableComponent. Because of this, it's not really polymorphic, but it prevents this problem (and hopefully is faster, but I haven't measured it). Any additional props can be placed on a componentsProps.root object.

But in principle, yes, it does apply to generic components. There is a note in Select docs describing the need to cast because of this problem.

[mnajdova]

@mnajdova The codesandbox you linked here has an issue - in lines 9 and 10 a Button is wrapped in styled, not ButtonUnstyled. Correcting it makes it work without errors.

This is likely because ButtonUnstyled does not inherit from OverridableComponent. Because of this, it's not really polymorphic, but it prevents this problem (and hopefully is faster, but I haven't measured it). Any additional props can be placed on a componentsProps.root object.

But in principle, yes, it does apply to generic components. There is a note in Select docs describing the need to cast because of this problem.

Right, I've updated the sandboxed. Let's leave it as is for know then and if necessary we can add similar section on one of the guides for the base components.